Pricing Table

<div data-rsl-pricing-table data-pricing-currency="$">

    <!-- Tier 1: Basic -->
    <div data-tier-name="Basic"
         data-tier-description="For individuals"
         data-tier-price-monthly="9"
         data-tier-price-annual="7"
         data-tier-cta-text="Get Started"
         data-tier-cta-url="/signup?plan=basic">

        <div data-feature-text="5 Projects" data-feature-included="true"></div>
        <div data-feature-text="10GB Storage" data-feature-included="true"></div>
        <div data-feature-text="Priority Support" data-feature-included="false"></div>
    </div>

    <!-- Tier 2: Pro (Highlighted) -->
    <div data-tier-name="Pro"
         data-tier-description="For growing teams"
         data-tier-price-monthly="29"
         data-tier-price-annual="24"
         data-tier-highlighted="true"
         data-tier-badge="Most Popular"
         data-tier-cta-text="Start Free Trial"
         data-tier-cta-url="/signup?plan=pro">

        <div data-feature-text="Unlimited Projects" data-feature-included="true"></div>
        <div data-feature-text="100GB Storage" data-feature-included="true"></div>
        <div data-feature-text="Priority Support" data-feature-included="true"></div>
    </div>

    <!-- Tier 3: Enterprise -->
    <div data-tier-name="Enterprise"
         data-tier-description="For large organizations"
         data-tier-custom-price="Contact Sales"
         data-tier-cta-text="Contact Us"
         data-tier-cta-url="/contact">

        <div data-feature-text="Custom Limits" data-feature-included="true"></div>
        <div data-feature-text="Unlimited Storage" data-feature-included="true"></div>
        <div data-feature-text="Dedicated Support" data-feature-included="true"></div>
    </div>

</div>

document.querySelector('[data-rsl-pricing-table]')
    .addEventListener('rsl-pricing-toggle', function(e) {
        console.log('Billing changed:', e.detail.period);
        console.log('Is annual:', e.detail.isAnnual);

        // Update analytics, etc.
    });

RSL.JSONLayout.renderLayout('#pricing-container', {
    version: 2,
    layoutId: "pricing-demo",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "pricing-table",
            currency: "$",
            animate: true,
            tiers: [
                {
                    name: "Starter",
                    description: "Perfect for individuals",
                    priceMonthly: 9,
                    priceAnnual: 7,
                    ctaText: "Get Started",
                    ctaUrl: "#signup",
                    features: [
                        { text: "5 Projects", included: true },
                        { text: "API Access", included: false }
                    ]
                },
                {
                    name: "Pro",
                    priceMonthly: 29,
                    priceAnnual: 24,
                    badge: "Most Popular",
                    highlighted: true,
                    ctaText: "Start Trial",
                    ctaVariant: "primary",
                    features: [
                        { text: "Unlimited Projects", included: true },
                        { text: "API Access", included: true }
                    ]
                }
            ]
        }
    }]
});