← All layouts  ·  Finance

paid Billing and plans

Current plan, usage against limits, payment method, history.

Usage bars sit next to the limit they run against, so 'how close am I' is answered without arithmetic. Downgrade is as findable as upgrade.

• .ms-sidenav
• .ms-card
• .ms-progress
• .ms-shell
• .ms-badge
• .ms-btn

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.

<div class="ms-shell">
    <aside class="ms-shell__sidebar">
        <div class="ms-shell__brand">Meridian</div>
        <ul class="ms-sidenav">
            <li class="ms-sidenav__section">Banking</li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">account_balance</span>Accounts</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">swap_horiz</span>Payments</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">receipt_long</span>Invoices</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">insights</span>Reports</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">credit_card</span>Cards</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" href="#"><span class="material-icons">settings</span>Settings</a></li>
        </ul>
    </aside>
    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <strong>Billing</strong>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-avatar-sm">SM</span>
        </div>
        <div class="ms-shell__body">
            <div class="u-grid u-grid-cols-12">
                <div class="u-col-12 u-col-lg-7">
                    <div class="ms-card ms-card--accent">
                        <div class="ms-toolbar">
                            <div><h2 style="margin:0">Team plan</h2>
                                <p class="ms-stat__meta">&pound;49 a month &middot; renews 14 September</p></div>
                            <span class="ms-toolbar__spacer"></span>
                            <button class="ms-btn ms-btn--outline">Change plan</button>
                        </div>
                    </div>

                    <div class="ms-card">
                        <h2>Usage this period</h2>
                        <p class="ms-label">Seats &mdash; 8 of 10</p>
                        <div class="ms-progress"><div class="ms-progress__bar" style="width:80%"></div></div>
                        <p class="ms-label u-mt-4">API calls &mdash; 412,000 of 500,000</p>
                        <div class="ms-progress"><div class="ms-progress__bar ms-progress--warning" style="width:82%"></div></div>
                        <p class="ms-label u-mt-4">Storage &mdash; 22GB of 100GB</p>
                        <div class="ms-progress"><div class="ms-progress__bar" style="width:22%"></div></div>
                    </div>

                    <div class="ms-card ms-card--flush">
                        <div class="u-p-4"><h2 style="margin:0">Invoices</h2></div>
                        <table class="ms-table ms-table--compact">
                            <tr><td>14 Aug 2026</td><td>&pound;49.00</td>
                                <td><span class="ms-badge ms-badge--success">Paid</span></td>
                                <td class="u-text-right"><a class="u-link" href="#">PDF</a></td></tr>
                            <tr><td>14 Jul 2026</td><td>&pound;49.00</td>
                                <td><span class="ms-badge ms-badge--success">Paid</span></td>
                                <td class="u-text-right"><a class="u-link" href="#">PDF</a></td></tr>
                        </table>
                    </div>
                </div>

                <div class="u-col-12 u-col-lg-5">
                    <div class="ms-card">
                        <h2>Payment method</h2>
                        <div class="ms-card ms-card--flat">
                            <strong>Visa ending 6411</strong>
                            <p class="ms-stat__meta">Expires 09/28</p>
                        </div>
                        <button class="ms-btn ms-btn--outline u-w-full u-mt-2">Update card</button>
                    </div>
                    <div class="ms-card ms-card--flat">
                        <h2>Need less?</h2>
                        <p>Downgrading keeps your data and takes effect at the end of the
                            current period.</p>
                        <a class="u-link" href="#">Move to the Solo plan</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More finance layouts