← All layouts  ·  Community

chat_bubble Chat

Conversation list, message thread and composer.

The message column scrolls; the list and composer do not. That one decision is most of what makes a chat interface feel right.

• .ms-sidenav
• .ms-stat
• .ms-card
• .ms-shell
• .ms-avatar-sm
• .ms-input

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">Messages</div>
        <div class="u-p-3"><input class="ms-input ms-input--sm" placeholder="Search"></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">JD</span>
                <span>James Doyle<br><span class="ms-stat__meta">Waited a day at Strabeg&hellip;</span></span></a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
                <span class="ms-avatar-sm">PK</span>
                <span>Priya Kaur<br><span class="ms-stat__meta">Sounds good</span></span></a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
                <span class="ms-avatar-sm">TM</span>
                <span>Tom Mercer<br><span class="ms-stat__meta">Photos attached</span></span></a></li>
        </ul>
    </aside>

    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <span class="ms-avatar-sm">JD</span>
            <div><strong>James Doyle</strong>
                <p class="ms-stat__meta" style="margin:0">Active now</p></div>
        </div>

        <div class="ms-shell__body">
            <div class="ms-card ms-card--flat" style="max-width:60%">
                <p>Did you end up going in September?</p>
                <p class="ms-stat__meta">09:12</p>
            </div>
            <div class="ms-card ms-card--accent" style="max-width:60%; margin-left:auto">
                <p>Booked for the 8th. Any advice on the crossings?</p>
                <p class="ms-stat__meta">09:14</p>
            </div>
            <div class="ms-card ms-card--flat" style="max-width:60%">
                <p>Take a spare day. We waited at Strabeg for the water to drop and it was
                    the right call.</p>
                <p class="ms-stat__meta">09:16</p>
            </div>
        </div>

        <div class="u-p-4" style="border-top:1px solid #e5e5e5; background:#fff">
            <div class="ms-input-group">
                <input class="ms-input" placeholder="Write a message">
                <button class="ms-btn ms-btn--primary">Send</button>
            </div>
        </div>
    </div>
</div>

More community layouts