Pricing Boxes

Pricing Boxes

Pricing boxes lay out a plan's title, price, feature list, and call-to-action in a single card. The .pricing-box wrapper stacks four sections in order (title, price, features, action), and modifiers let you highlight the recommended plan or switch to minimal and simple layouts.

Structure

• .pricing : optional row wrapper for a group of pricing columns.
• .pricing-box : a single plan card.
• .pricing-title : holds the plan name in an <h3>, with an optional <span> subtitle placed after the heading.
• .pricing-price : the price block. Use .price-unit for the currency symbol and .price-tenure for the /mo suffix.
• .pricing-features : an unordered <ul> list of included features.
• .pricing-action : the CTA area, typically holding a button.
• .pricing-highlight : emphasizes the recommended plan (larger, raised).
• .pricing-minimal : stripped-down minimal card style.
• .pricing-simple : simple flat card style, often combined with background utilities.
• .pricing-extended : horizontal extended layout with a description column.

Markup

<div class="row pricing col-mb-30">
    <div class="col-md-6 col-lg-3">
        <div class="pricing-box text-center">
            <div class="pricing-title text-uppercase title-sm">
                <h3>Starter</h3>
            </div>
            <div class="pricing-price">
                <span class="price-unit">&euro;</span>7<span class="price-tenure">/mo</span>
            </div>
            <div class="pricing-features">
                <ul>
                    <li><strong>Full</strong> Access</li>
                    <li><i class="bi-braces"></i> Source Files</li>
                    <li><strong>100</strong> User Accounts</li>
                    <li><strong>1 Year</strong> License</li>
                    <li>Phone &amp; Email Support</li>
                </ul>
            </div>
            <div class="pricing-action px-4">
                <a href="#" class="button button-rounded button-large w-100">Sign Up</a>
            </div>
        </div>
    </div>
</div>

Variants

Highlighted (recommended) plan

Add .pricing-highlight and place a <span> subtitle after the <h3> inside .pricing-title.

<div class="pricing-box pricing-highlight text-center">
    <div class="pricing-title text-uppercase title-sm">
        <h3>Professional</h3>
        <span>Most Popular</span>
    </div>
    <div class="pricing-price">
        <span class="price-unit">&euro;</span>12<span class="price-tenure">/mo</span>
    </div>
    <div class="pricing-features">
        <ul>
            <li><strong>Full</strong> Access</li>
            <li><strong>1000</strong> User Accounts</li>
            <li><strong>2 Years</strong> License</li>
        </ul>
    </div>
    <div class="pricing-action px-4">
        <a href="#" class="button button-rounded button-large w-100">Sign Up</a>
    </div>
</div>

Minimal plan

<div class="pricing-box pricing-minimal text-center">
    <div class="pricing-title title-sm">
        <h3>Basic</h3>
    </div>
    <div class="pricing-price">
        <span class="price-unit">$</span>9<span class="price-tenure">/mo</span>
    </div>
    <div class="pricing-features">
        <ul>
            <li>Single Site License</li>
            <li>Email Support</li>
        </ul>
    </div>
    <div class="pricing-action">
        <a href="#" class="button button-rounded">Choose Plan</a>
    </div>
</div>

Tips

• Keep the section order title, price, features, action inside every .pricing-box, since the styling assumes that sequence.
• The subtitle <span> inside .pricing-title goes after the <h3>, not before it.
• .pricing-action px-4 gives full-width buttons breathing room on the sides of the card.