← All layouts  ·  Marketing

local_offer Pricing

Tiers, a highlighted plan and a comparison table.

Three tiers with the middle one marked, then the full table for anybody comparing properly. The annual toggle states the saving rather than making people work it out.

• .ms-card
• .ms-btn
• .ms-stat
• .ms-footer-section
• .ms-toggle
• .ms-table

Open full page

Live

The layout as it renders, in a frame at its own width. Resize the window to watch it respond — the frame is a real viewport.

How to build it

This is the layout's template, read from disk — the same file the frame above renders, so it cannot drift out of date. Copy it into your own page and replace the content; every class in it ships in mcgowan.css.

<header class="ms-topbar">
    <div class="ms-logo"><a class="u-link" href="#">Ledgerline</a></div>
    <nav class="ms-topbar__nav">
        <a href="#">Product</a><a href="#">Pricing</a><a href="#">Customers</a><a href="#">Docs</a>
    </nav>
    <div class="ms-toolbar">
        <a class="ms-btn ms-btn--ghost ms-btn--sm" href="#">Sign in</a>
        <a class="ms-btn ms-btn--primary ms-btn--sm" href="#">Start free</a>
    </div>
</header>

<div class="u-container u-py-8">
    <div class="u-text-center">
        <h1>Pricing</h1>
        <p>One price per business, not per transaction. Change or cancel whenever.</p>
        <label class="ms-toggle" style="justify-content:center">
            <input checked type="checkbox">
            <span class="ms-toggle__track"><span class="ms-toggle__thumb"></span></span>
            Billed annually &mdash; <strong>two months free</strong>
        </label>
    </div>

    <div class="u-grid u-grid-cols-12 u-mt-6">
        <div class="u-col-12 u-col-md-4"><div class="ms-card ms-card--fill">
            <h2>Solo</h2>
            <p class="ms-stat__value">&pound;19<span class="ms-stat__meta">/month</span></p>
            <p>For a sole trader doing their own books.</p>
            <ul><li>One user</li><li>Two bank feeds</li><li>VAT returns</li><li>Email support</li></ul>
            <div class="ms-card__footer">
                <a class="ms-btn ms-btn--outline u-w-full" href="#">Choose Solo</a></div>
        </div></div>

        <div class="u-col-12 u-col-md-4"><div class="ms-card ms-card--featured ms-card--fill">
            <span class="ms-card__ribbon">Most chosen</span>
            <h2>Team</h2>
            <p class="ms-stat__value">&pound;49<span class="ms-stat__meta">/month</span></p>
            <p>For a small company with an accountant attached.</p>
            <ul><li>Ten users</li><li>Unlimited feeds</li><li>Rules engine</li>
                <li>Accountant access</li><li>Priority support</li></ul>
            <div class="ms-card__footer">
                <a class="ms-btn ms-btn--primary u-w-full" href="#">Choose Team</a></div>
        </div></div>

        <div class="u-col-12 u-col-md-4"><div class="ms-card ms-card--fill">
            <h2>Practice</h2>
            <p class="ms-stat__value">&pound;149<span class="ms-stat__meta">/month</span></p>
            <p>For bookkeepers running many sets of books.</p>
            <ul><li>Unlimited clients</li><li>Bulk reconciliation</li><li>API access</li>
                <li>Named contact</li></ul>
            <div class="ms-card__footer">
                <a class="ms-btn ms-btn--outline u-w-full" href="#">Talk to us</a></div>
        </div></div>
    </div>

    <div class="ms-card ms-card--flush u-mt-8">
        <div class="u-p-4"><h2 style="margin:0">Compare in full</h2></div>
        <table class="ms-table ms-table--striped">
            <thead><tr><th>Feature</th><th>Solo</th><th>Team</th><th>Practice</th></tr></thead>
            <tbody>
                <tr><td>Users</td><td>1</td><td>10</td><td>Unlimited</td></tr>
                <tr><td>Bank feeds</td><td>2</td><td>Unlimited</td><td>Unlimited</td></tr>
                <tr><td>Rules engine</td><td>&mdash;</td><td>Yes</td><td>Yes</td></tr>
                <tr><td>API access</td><td>&mdash;</td><td>&mdash;</td><td>Yes</td></tr>
                <tr><td>Support</td><td>Email</td><td>Priority</td><td>Named contact</td></tr>
            </tbody>
        </table>
    </div>
</div>
<footer class="ms-footer"><div class="ms-footer-inner">
    <div class="ms-footer-section"><strong>Ledgerline</strong><p>Bookkeeping that keeps up.</p></div>
    <div class="ms-footer-section"><strong>Product</strong><p>Features<br>Pricing<br>Integrations</p></div>
    <div class="ms-footer-section"><strong>Company</strong><p>About<br>Careers<br>Contact</p></div>
    <div class="ms-footer-section"><strong>Legal</strong><p>Privacy<br>Terms<br>Security</p></div>
</div></footer>

More marketing layouts