← All layouts  ·  Admin

insights Analytics dashboard

KPI row, trend chart, breakdown table.

Summary before detail: four numbers across the top, the one chart worth the space beneath them, then the table for anybody who wants the actual rows. Never lead with the table.

• .ms-stat
• .ms-sidenav
• .ms-card
• .ms-shell
• .ms-chip
• .ms-toolbar

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">Northbound</div>
        <ul class="ms-sidenav">
            <li class="ms-sidenav__section">Manage</li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">dashboard</span>Overview</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">group</span>Customers</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">inventory_2</span>Products</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">receipt_long</span>Orders</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">settings</span>Settings</a></li>
        </ul>
    </aside>
    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <strong>Reports</strong>
            <span class="ms-toolbar__spacer"></span>
            <input class="ms-input" placeholder="Search" style="max-width:220px">
            <span class="ms-avatar-sm">AM</span>
        </div>
        <div class="ms-shell__body">
            <nav class="ms-breadcrumb"><span class="ms-breadcrumb-item">Home</span>
                <span class="ms-breadcrumb-item">Reports</span></nav>
            <div class="ms-stat-row u-mb-4">
                <div class="ms-card"><div class="ms-stat">
                    <span class="ms-stat__label">Revenue</span>
                    <span class="ms-stat__value">&pound;48,210</span>
                    <span class="ms-stat__delta ms-stat__delta--good">&#9650; 12.4% on last month</span>
                </div></div>
                <div class="ms-card"><div class="ms-stat">
                    <span class="ms-stat__label">Orders</span>
                    <span class="ms-stat__value">1,284</span>
                    <span class="ms-stat__delta ms-stat__delta--good">&#9650; 4.1%</span>
                </div></div>
                <div class="ms-card"><div class="ms-stat">
                    <span class="ms-stat__label">Average order</span>
                    <span class="ms-stat__value">&pound;37.55</span>
                    <span class="ms-stat__delta ms-stat__delta--bad">&#9660; 2.0%</span>
                </div></div>
                <div class="ms-card"><div class="ms-stat">
                    <span class="ms-stat__label">Refund rate</span>
                    <span class="ms-stat__value">1.8%</span>
                    <span class="ms-stat__delta ms-stat__delta--good">&#9660; 0.3pp</span>
                </div></div>
            </div>

            <div class="ms-card u-mb-4">
                <div class="ms-toolbar">
                    <h2 style="margin:0">Revenue, 12 months</h2>
                    <span class="ms-toolbar__spacer"></span>
                    <div class="ms-chip-set">
                        <button class="ms-chip" type="button">3m</button>
                        <button class="ms-chip ms-chip--active" type="button">12m</button>
                        <button class="ms-chip" type="button">All</button>
                    </div>
                </div>
                <span class="ms-thumb ms-thumb--wide"></span>
                <p class="ms-stat__meta">Chart region &mdash; drop your chart library here.</p>
            </div>

            <div class="ms-card ms-card--flush">
                <table class="ms-table ms-table--striped">
                    <thead><tr><th>Channel</th><th>Sessions</th><th>Orders</th>
                        <th>Conversion</th><th>Revenue</th></tr></thead>
                    <tbody>
                        <tr><td>Organic search</td><td>48,210</td><td>612</td><td>1.27%</td><td>&pound;22,940</td></tr>
                        <tr><td>Direct</td><td>21,004</td><td>388</td><td>1.85%</td><td>&pound;14,120</td></tr>
                        <tr><td>Email</td><td>9,880</td><td>194</td><td>1.96%</td><td>&pound;7,410</td></tr>
                        <tr><td>Paid social</td><td>15,320</td><td>90</td><td>0.59%</td><td>&pound;3,740</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

More admin layouts