Go back to Examples


Plugins - Beginner

The pricing plugin is used to show multiple prices in 1 section using a button. This can be used to show monthly and annual prices without using tabs and repeating content. The plugin can expanded to handle quarterly and other durations.

                <section class="py-28" id="pricing">
    <div class="container">
        <div class="row">
            <div class="col">
                <h2 class="display-6 font-semibold mb-3">Our Pricing</h2>
                <p>No additional costs. Pay a fixed monthly fee we handle everything for you.</p>
                <div class="btn-group">
                    <button class="btn btn-primary rounded-none" id="monthly-pricing-button">Monthly</button>
                    <button class="btn btn-outline btn-primary rounded-none" id="annual-pricing-button">Annual</button>
        <div class="row mt-12">
            <div class="col md:w-4/12">
                <h2 class="display-6 mb-3">
                    <span data-monthly="$120" data-annual="$83">$120</span>
                    <span class="text-small">/mo</span>