Pricing Table

Pricing cards for SaaS, product, and service pages. The highlighted tier draws the eye through .card.is-featured — a primary-colored 2px border. No shadow override, no inline styles on the card; the variant is the whole highlight.

Core: .card, .card.is-featured, .divider, .grid, .flow, .cluster, .button, .button.as-block, .badge

Three-tier

Three plans with the middle tier highlighted. <footer> inside each card pushes the CTA to the bottom edge automatically, so buttons align across the row regardless of how many features each tier lists.

Starter

$9 /month

For individuals and small projects.

5 projects

10 GB storage

Email support

Pro

Popular

$29 /month

For growing teams that need more.

Unlimited projects

100 GB storage

Priority support

Custom domains

Enterprise

$99 /month

For organizations with advanced needs.

Everything in Pro

Unlimited storage

SSO and audit logs

Dedicated support

SLA guarantee

<docs-resize>
    <div class="grid" style="--grid-min: 16rem">
        <article class="card">
            <header class="flow flow-space-2xs">
                <h3>Starter</h3>
                <p>
                    <span class="text-3 text-bold leading-tight">$9</span>
                    <span class="text-muted text--1">/month</span>
                </p>
                <p class="text-muted text--1">For individuals and small projects.</p>
            </header>
            <hr class="divider"/>
            <div class="flow flow-space-2xs text--1">
                <p>5 projects</p>
                <p>10 GB storage</p>
                <p>Email support</p>
            </div>
            <footer>
                <a class="button is-outlined as-block" href="#">Get started</a>
            </footer>
        </article>

        <article class="card is-featured">
            <header class="flow flow-space-2xs">
                <div class="cluster is-between">
                    <h3>Pro</h3>
                    <span class="badge text--2">Popular</span>
                </div>
                <p>
                    <span class="text-3 text-bold leading-tight">$29</span>
                    <span class="text-muted text--1">/month</span>
                </p>
                <p class="text-muted text--1">For growing teams that need more.</p>
            </header>
            <hr class="divider"/>
            <div class="flow flow-space-2xs text--1">
                <p>Unlimited projects</p>
                <p>100 GB storage</p>
                <p>Priority support</p>
                <p>Custom domains</p>
            </div>
            <footer>
                <a class="button as-block" href="#">Get started</a>
            </footer>
        </article>

        <article class="card">
            <header class="flow flow-space-2xs">
                <h3>Enterprise</h3>
                <p>
                    <span class="text-3 text-bold leading-tight">$99</span>
                    <span class="text-muted text--1">/month</span>
                </p>
                <p class="text-muted text--1">For organizations with advanced needs.</p>
            </header>
            <hr class="divider"/>
            <div class="flow flow-space-2xs text--1">
                <p>Everything in Pro</p>
                <p>Unlimited storage</p>
                <p>SSO and audit logs</p>
                <p>Dedicated support</p>
                <p>SLA guarantee</p>
            </div>
            <footer>
                <a class="button is-outlined as-block" href="#">Contact sales</a>
            </footer>
        </article>
    </div>
</docs-resize>

Two-tier

When you only have free and paid. Same shape, two cards, slightly larger --grid-min so the columns balance.

Free

$0 /forever

3 projects

Community support

Pro

$12 /month

Unlimited projects

Priority support

Advanced analytics

<docs-resize>
    <div class="grid" style="--grid-min: 18rem">
        <article class="card">
            <header class="flow flow-space-2xs">
                <h3>Free</h3>
                <p>
                    <span class="text-3 text-bold leading-tight">$0</span>
                    <span class="text-muted text--1">/forever</span>
                </p>
            </header>
            <hr class="divider"/>
            <div class="flow flow-space-2xs text--1">
                <p>3 projects</p>
                <p>Community support</p>
            </div>
            <footer>
                <a class="button is-outlined as-block" href="#">Sign up free</a>
            </footer>
        </article>

        <article class="card is-featured">
            <header class="flow flow-space-2xs">
                <h3>Pro</h3>
                <p>
                    <span class="text-3 text-bold leading-tight">$12</span>
                    <span class="text-muted text--1">/month</span>
                </p>
            </header>
            <hr class="divider"/>
            <div class="flow flow-space-2xs text--1">
                <p>Unlimited projects</p>
                <p>Priority support</p>
                <p>Advanced analytics</p>
            </div>
            <footer>
                <a class="button as-block" href="#">Upgrade</a>
            </footer>
        </article>
    </div>
</docs-resize>

How it works

Each tier is an <article class="card"> with three semantic regions: <header> for plan name, price, and description; an unwrapped .flow.flow-space-2xs for the feature list; <footer> for the CTA. The card itself is a grid (per card.css); its margin-block-start: auto on > footer snaps the CTA to the bottom edge regardless of body height. .card.is-featured handles the highlight by swapping --card-border to primary and thickening to --border-width-thick — no shadow override.

Button hierarchy mirrors visual hierarchy: filled .button on the featured tier, .button.is-outlined on the others. .button.as-block stretches each CTA to the card's width. The grid uses --grid-min for column wrap — 16rem for three tiers, 18rem for two so the columns balance.

No demo CSS on this page. Every line is composed from existing brio primitives.