← All layouts  ·  Finance

trending_up Portfolio tracker

Holdings, allocation and performance over time.

Gains and losses are coloured, but never *only* coloured -- every figure carries its sign, so the page still reads for somebody who cannot tell the two hues apart.

• .ms-stat
• .ms-sidenav
• .ms-card
• .ms-shell
• .ms-table
• .ms-thumb

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 ms-sidenav__link--active" 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>Portfolio</strong>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-avatar-sm">SM</span>
        </div>
        <div class="ms-shell__body">
            <div class="ms-stat-row u-mb-4">
                <div class="ms-card"><div class="ms-stat">
                    <span class="ms-stat__label">Total value</span>
                    <span class="ms-stat__value">&pound;284,910</span>
                    <span class="ms-stat__delta ms-stat__delta--good">+&pound;4,120 (+1.5%) today</span>
                </div></div>
                <div class="ms-card"><div class="ms-stat">
                    <span class="ms-stat__label">Invested</span>
                    <span class="ms-stat__value">&pound;210,000</span>
                    <span class="ms-stat__meta">since March 2019</span>
                </div></div>
                <div class="ms-card"><div class="ms-stat">
                    <span class="ms-stat__label">Total return</span>
                    <span class="ms-stat__value">+35.7%</span>
                    <span class="ms-stat__delta ms-stat__delta--good">+&pound;74,910</span>
                </div></div>
                <div class="ms-card"><div class="ms-stat">
                    <span class="ms-stat__label">Income, 12m</span>
                    <span class="ms-stat__value">&pound;6,240</span>
                    <span class="ms-stat__meta">2.2% yield</span>
                </div></div>
            </div>

            <div class="u-grid u-grid-cols-12">
                <div class="u-col-12 u-col-lg-8">
                    <div class="ms-card">
                        <h2>Performance</h2>
                        <span class="ms-thumb ms-thumb--wide"></span>
                    </div>
                </div>
                <div class="u-col-12 u-col-lg-4">
                    <div class="ms-card ms-card--fill">
                        <h2>Allocation</h2>
                        <table class="ms-table ms-table--compact">
                            <tr><td>Equities</td><td class="u-text-right">62%</td></tr>
                            <tr><td>Bonds</td><td class="u-text-right">21%</td></tr>
                            <tr><td>Property</td><td class="u-text-right">11%</td></tr>
                            <tr><td>Cash</td><td class="u-text-right">6%</td></tr>
                        </table>
                    </div>
                </div>
            </div>

            <div class="ms-card ms-card--flush u-mt-4">
                <table class="ms-table ms-table--striped">
                    <thead><tr><th>Holding</th><th class="u-text-right">Units</th>
                        <th class="u-text-right">Price</th><th class="u-text-right">Value</th>
                        <th class="u-text-right">Day</th></tr></thead>
                    <tbody>
                        <tr><td>Global Index Fund</td><td class="u-text-right">1,240</td>
                            <td class="u-text-right">&pound;84.20</td><td class="u-text-right">&pound;104,408</td>
                            <td class="u-text-right"><span class="ms-stat__delta ms-stat__delta--good">+1.8%</span></td></tr>
                        <tr><td>UK Gilt 2031</td><td class="u-text-right">600</td>
                            <td class="u-text-right">&pound;96.40</td><td class="u-text-right">&pound;57,840</td>
                            <td class="u-text-right"><span class="ms-stat__delta ms-stat__delta--bad">&minus;0.3%</span></td></tr>
                        <tr><td>REIT Income</td><td class="u-text-right">910</td>
                            <td class="u-text-right">&pound;34.10</td><td class="u-text-right">&pound;31,031</td>
                            <td class="u-text-right"><span class="ms-stat__delta ms-stat__delta--good">+0.4%</span></td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

More finance layouts