← All layouts  ·  Admin

CRM contacts

List, detail and activity timeline in three panes.

Three panes so a salesperson never loses their place: the list stays, the record fills the middle, the history sits right. Selecting a contact changes one pane, not the whole page.

  • .ms-sidenav
  • .ms-timeline
  • .ms-shell
  • .ms-avatar-sm
  • .ms-btn
  • .ms-card

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  ms-sidenav__link--active" 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" 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>Customers</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">Customers</span></nav>
            <div class="u-grid u-grid-cols-12">
                <div class="u-col-12 u-col-lg-3">
                    <div class="ms-card ms-card--flush">
                        <div class="u-p-3"><input class="ms-input" placeholder="Search contacts"></div>
                        <ul class="ms-sidenav">
                            <li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" href="#">
                                <span class="ms-avatar-sm">ER</span>Ellie Roberts</a></li>
                            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
                                <span class="ms-avatar-sm">JD</span>James Doyle</a></li>
                            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
                                <span class="ms-avatar-sm">PK</span>Priya Kaur</a></li>
                            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
                                <span class="ms-avatar-sm">TM</span>Tom Mercer</a></li>
                        </ul>
                    </div>
                </div>

                <div class="u-col-12 u-col-lg-6">
                    <div class="ms-card">
                        <div class="ms-toolbar">
                            <span class="ms-avatar-lg">ER</span>
                            <div>
                                <h2 style="margin:0">Ellie Roberts</h2>
                                <p class="ms-stat__meta">Buyer &middot; Fellside Outdoor</p>
                            </div>
                            <span class="ms-toolbar__spacer"></span>
                            <span class="ms-badge ms-badge--success">Active</span>
                        </div>
                        <table class="ms-table">
                            <tr><th>Email</th><td>ellie@fellside.example</td></tr>
                            <tr><th>Phone</th><td>01539 000000</td></tr>
                            <tr><th>Account value</th><td>&pound;84,200</td></tr>
                            <tr><th>Owner</th><td>Sam Mercer</td></tr>
                        </table>
                        <div class="ms-toolbar u-mt-4">
                            <button class="ms-btn ms-btn--primary">Log a call</button>
                            <button class="ms-btn ms-btn--outline">Add note</button>
                        </div>
                    </div>
                </div>

                <div class="u-col-12 u-col-lg-3">
                    <div class="ms-card">
                        <h2>Activity</h2>
                        <ul class="ms-timeline">
                            <li class="ms-timeline__item"><span class="ms-timeline__marker"></span>
                                <span class="ms-timeline__time">Today, 09:14</span>
                                <div class="ms-timeline__body">Quote sent for autumn order.</div></li>
                            <li class="ms-timeline__item"><span class="ms-timeline__marker"></span>
                                <span class="ms-timeline__time">Yesterday</span>
                                <div class="ms-timeline__body">Call &mdash; discussed lead times.</div></li>
                            <li class="ms-timeline__item"><span class="ms-timeline__marker"></span>
                                <span class="ms-timeline__time">14 Aug</span>
                                <div class="ms-timeline__body">Invoice 4471 paid.</div></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More admin layouts

Admin shell
Analytics dashboard
Data table workbench
Settings
User management