Pricing Table Examples

Standard 3-Tier Pricing

Classic pricing layout with monthly/annual toggle, highlighted tier, and feature comparison.

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

    <!-- Starter -->
    <div data-tier-name="Starter"
         data-tier-description="Perfect for individuals"
         data-tier-price-monthly="9"
         data-tier-price-annual="7"
         data-tier-cta-text="Get Started"
         data-tier-cta-url="#signup">
        <div data-feature-text="3 Projects" data-feature-included="true"></div>
        <div data-feature-text="5GB Storage" data-feature-included="true"></div>
        <div data-feature-text="API Access" data-feature-included="false"></div>
    </div>

    <!-- Professional (Highlighted) -->
    <div data-tier-name="Professional"
         data-tier-highlighted="true"
         data-tier-badge="Most Popular"
         data-tier-price-monthly="29"
         data-tier-price-annual="24">
        <div data-feature-text="Unlimited Projects" data-feature-included="true"></div>
        <div data-feature-text="50GB Storage" data-feature-included="true"></div>
        <div data-feature-text="Custom Integrations"
             data-feature-included="partial"
             data-feature-tooltip="Up to 5 integrations"></div>
    </div>

    <!-- Enterprise -->
    <div data-tier-name="Enterprise"
         data-tier-price-monthly="99"
         data-tier-price-annual="79">
        <div data-feature-text="Unlimited Everything" data-feature-included="true"></div>
    </div>

</div>

Compact Variant

Smaller, more condensed pricing cards for tight spaces or simpler pricing models.

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

    <div data-tier-name="Free"
         data-tier-custom-price="Free"
         data-tier-cta-text="Sign Up Free">
        <div data-feature-text="1 Project" data-feature-included="true"></div>
    </div>

    <div data-tier-name="Pro"
         data-tier-price-monthly="19"
         data-tier-highlighted="true"
         data-tier-badge="Best Value"
         data-tier-badge-variant="success">
        <div data-feature-text="Unlimited Projects" data-feature-included="true"></div>
    </div>

</div>

Feature Tooltips

Add helpful tooltips to features to explain limitations, details, or nuances. Hover over the info icons (ⓘ) to see the tooltips.

<!-- Add data-feature-tooltip to any feature for additional info -->

<div data-feature-text="Storage"
     data-feature-included="true"
     data-feature-tooltip="10GB of secure cloud storage"></div>

<div data-feature-text="API Calls"
     data-feature-included="partial"
     data-feature-tooltip="Limited to 1,000 calls per month"></div>

<div data-feature-text="Analytics"
     data-feature-included="false"
     data-feature-tooltip="Not available on this plan"></div>

Feature Categories

Group features into categories for easier comparison of complex plans.

<div data-tier-name="Business" data-tier-highlighted="true">

    <!-- Category Header -->
    <div data-feature-category="Core Features"></div>
    <div data-feature-text="Unlimited Projects" data-feature-included="true"></div>
    <div data-feature-text="100GB Storage" data-feature-included="true"></div>

    <!-- Another Category -->
    <div data-feature-category="Integrations"></div>
    <div data-feature-text="Slack" data-feature-included="true"></div>
    <div data-feature-text="GitHub" data-feature-included="true"></div>

    <!-- With Tooltip -->
    <div data-feature-text="SSO"
         data-feature-included="partial"
         data-feature-tooltip="Available as add-on ($10/mo)"></div>

</div>

Custom Pricing & Original Price

Displaying custom price text, promotional pricing with original price strikethrough.

<!-- Free tier with custom price text -->
<div data-tier-name="Hobby"
     data-tier-custom-price="Free Forever">
    ...
</div>

<!-- Discounted tier with original price -->
<div data-tier-name="Pro"
     data-tier-price-monthly="29"
     data-tier-original-price="49"
     data-tier-badge="Limited Time"
     data-tier-badge-variant="warning">
    ...
</div>

<!-- Contact sales -->
<div data-tier-name="Enterprise"
     data-tier-custom-price="Contact Sales"
     data-tier-cta-text="Talk to Us"
     data-tier-cta-variant="secondary">
    ...
</div>

International Currency

Using different currencies and customizing the billing period text.

<div data-rsl-pricing-table
     data-pricing-currency="€"
     data-pricing-period="Monat"
     data-pricing-toggle-monthly="Monatlich"
     data-pricing-toggle-annual="Jährlich"
     data-pricing-savings-template="{{percent}}% sparen">

    <div data-tier-name="Profi"
         data-tier-price-monthly="49"
         data-tier-price-annual="39"
         data-tier-highlighted="true"
         data-tier-badge="Beliebteste">
        <div data-feature-text="Unbegrenzte Projekte" data-feature-included="true"></div>
    </div>

</div>

JavaScript API

Programmatically control the billing toggle and listen to events.

Current: Monthly

// Set billing period programmatically
RSL.PricingTable.setBilling('#pricing', true);  // Set to annual
RSL.PricingTable.setBilling('#pricing', false); // Set to monthly

// Check current billing period
const isAnnual = RSL.PricingTable.isAnnual('#pricing');
console.log('Annual billing:', isAnnual);

// Listen for toggle changes
document.querySelector('#pricing')
    .addEventListener('rsl-pricing-toggle', function(e) {
        console.log('Billing changed to:', e.detail.period);
        console.log('Is annual:', e.detail.isAnnual);

        // Update UI, analytics, etc.
    });