← All layouts  ·  Productivity

mail Email client

Folders, message list and reading pane.

Three panes, and the reading pane is the one that scrolls. Unread weight is carried by type, not only by a dot.

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

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">Mail</div>
        <div class="u-p-3"><button class="ms-btn ms-btn--primary u-w-full">Compose</button></div>
        <ul class="ms-sidenav">
            <li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" href="#">
                <span class="material-icons">inbox</span>Inbox <span class="ms-badge">12</span></a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
                <span class="material-icons">send</span>Sent</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
                <span class="material-icons">drafts</span>Drafts <span class="ms-badge">2</span></a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
                <span class="material-icons">label</span>Invoices</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
                <span class="material-icons">delete</span>Bin</a></li>
        </ul>
    </aside>

    <div style="flex:0 0 330px; background:#fff; border-right:1px solid #e5e5e5; overflow-y:auto">
        <div class="u-p-3"><input class="ms-input ms-input--sm" placeholder="Search mail"></div>
        <div class="ms-card ms-card--flat ms-card--compact ms-card--accent" style="border-radius:0">
            <div class="ms-toolbar" style="margin:0">
                <strong>Fellside Outdoor</strong>
                <span class="ms-toolbar__spacer"></span>
                <span class="ms-stat__meta">09:41</span>
            </div>
            <strong>Re: Invoice 4471</strong>
            <p class="ms-stat__meta">Thanks for chasing &mdash; it is scheduled for Friday.</p>
        </div>
        <div class="ms-card ms-card--flat ms-card--compact" style="border-radius:0">
            <div class="ms-toolbar" style="margin:0">
                <span>HMRC</span>
                <span class="ms-toolbar__spacer"></span>
                <span class="ms-stat__meta">08:02</span>
            </div>
            <strong>VAT return received</strong>
            <p class="ms-stat__meta">Your submission for period 04/26 has been received.</p>
        </div>
        <div class="ms-card ms-card--flat ms-card--compact" style="border-radius:0">
            <div class="ms-toolbar" style="margin:0">
                <span>James Doyle</span>
                <span class="ms-toolbar__spacer"></span>
                <span class="ms-stat__meta">yesterday</span>
            </div>
            <strong>Bulk reconciliation &mdash; ready for review</strong>
            <p class="ms-stat__meta">Branch is up. One question about the batch limit.</p>
        </div>
    </div>

    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <button class="ms-btn ms-btn--sm ms-btn--ghost">
                <span class="material-icons">archive</span></button>
            <button class="ms-btn ms-btn--sm ms-btn--ghost">
                <span class="material-icons">delete</span></button>
            <button class="ms-btn ms-btn--sm ms-btn--ghost">
                <span class="material-icons">label</span></button>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-stat__meta">1 of 12</span>
        </div>

        <div class="ms-shell__body">
            <h1>Re: Invoice 4471</h1>
            <div class="ms-toolbar">
                <span class="ms-avatar-md">FO</span>
                <div><strong>accounts@fellside.example</strong>
                    <p class="ms-stat__meta">to me &middot; 22 August 2026 at 09:41</p></div>
                <span class="ms-toolbar__spacer"></span>
                <button class="ms-btn ms-btn--sm ms-btn--outline">Reply</button>
            </div>

            <div class="ms-card">
                <div class="ms-prose ms-prose--measure">
                    <p>Hello Ellie,</p>
                    <p>Thanks for chasing. Invoice 4471 is in Friday's payment run, so it
                        should land with you on Monday at the latest.</p>
                    <p>While I have you &mdash; are the wholesale prices in the attached
                        sheet still current for September?</p>
                    <p>Best,<br>Accounts, Fellside Outdoor</p>
                </div>
                <hr class="ms-divider">
                <div class="ms-toolbar">
                    <span class="material-icons">attach_file</span>
                    <span>wholesale-sept.xlsx</span>
                    <span class="ms-stat__meta">64 KB</span>
                    <a class="u-link" href="#">Download</a>
                </div>
            </div>
        </div>
    </div>
</div>

More productivity layouts