← All layouts  ·  Finance

account_balance Banking overview

Balances, spend chart and recent transactions.

The balance is the largest thing on the page because it is the reason anybody opened it. Transactions are dense and monospaced so the columns of figures line up.

• .ms-sidenav
• .ms-card
• .ms-shell
• .ms-stat
• .ms-btn
• .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.

<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 ms-sidenav__link--active" 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" href="#"><span class="material-icons">settings</span>Settings</a></li>
        </ul>
    </aside>
    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <strong>Accounts</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-8">
                    <div class="ms-card">
                        <div class="ms-stat">
                            <span class="ms-stat__label">Current account &middot; 20-00-00 12345678</span>
                            <span class="ms-stat__value">&pound;18,442.19</span>
                            <span class="ms-stat__delta ms-stat__delta--good">&#9650; &pound;2,104 this month</span>
                        </div>
                        <span class="ms-thumb ms-thumb--wide u-mt-4"></span>
                    </div>
                </div>
                <div class="u-col-12 u-col-lg-4">
                    <div class="ms-card ms-card--fill">
                        <h2>Move money</h2>
                        <button class="ms-btn ms-btn--primary u-w-full">Make a payment</button>
                        <button class="ms-btn ms-btn--outline u-w-full u-mt-2">Transfer between accounts</button>
                        <div class="ms-card__footer">
                            <span class="ms-stat__meta">Savings &pound;42,900.00</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ms-card ms-card--flush u-mt-4">
                <div class="u-p-4"><div class="ms-toolbar">
                    <h2 style="margin:0">Recent transactions</h2>
                    <span class="ms-toolbar__spacer"></span>
                    <a class="u-link" href="#">Download CSV</a>
                </div></div>
                <table class="ms-table ms-table--compact ms-table--striped">
                    <thead><tr><th>Date</th><th>Description</th><th>Category</th>
                        <th class="u-text-right">Amount</th><th class="u-text-right">Balance</th></tr></thead>
                    <tbody>
                        <tr><td>22 Aug</td><td>Fellside Outdoor</td><td>Income</td>
                            <td class="u-text-right">+&pound;4,200.00</td><td class="u-text-right">&pound;18,442.19</td></tr>
                        <tr><td>21 Aug</td><td>Rent &mdash; Unit 4</td><td>Premises</td>
                            <td class="u-text-right">&minus;&pound;1,450.00</td><td class="u-text-right">&pound;14,242.19</td></tr>
                        <tr><td>20 Aug</td><td>Fuel card</td><td>Vehicles</td>
                            <td class="u-text-right">&minus;&pound;312.40</td><td class="u-text-right">&pound;15,692.19</td></tr>
                        <tr><td>19 Aug</td><td>HMRC VAT</td><td>Tax</td>
                            <td class="u-text-right">&minus;&pound;2,880.00</td><td class="u-text-right">&pound;16,004.59</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

More finance layouts