← All layouts  ·  Community

person User profile

Cover, identity block, stats and tabbed content.

Identity above the fold, activity behind tabs. The stats row is three numbers, not nine, because a profile that lists everything communicates nothing.

• .ms-stat
• .ms-tab-nav
• .ms-card
• .ms-btn
• .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.

<header class="ms-topbar">
    <div class="ms-logo"><a class="u-link" href="#">Crosswinds</a></div>
    <nav class="ms-topbar__nav">
        <a href="#">Latest</a><a href="#">Categories</a><a href="#">Members</a>
    </nav>
    <div class="ms-toolbar">
        <input class="ms-input ms-input--sm" placeholder="Search" style="max-width:180px">
        <span class="ms-avatar-sm">ER</span>
    </div>
</header>

<span class="ms-thumb ms-thumb--wide"></span>

<div class="u-container">
    <div class="ms-card" style="margin-top:-3rem; position:relative">
        <div class="ms-toolbar">
            <span class="ms-avatar-xl">ER</span>
            <div>
                <h1 style="margin:0">Ellie Roberts</h1>
                <p class="ms-stat__meta">Kendal &middot; joined March 2019</p>
            </div>
            <span class="ms-toolbar__spacer"></span>
            <button class="ms-btn ms-btn--primary">Follow</button>
            <button class="ms-btn ms-btn--outline">Message</button>
        </div>
        <p>Long-distance walker, occasional gear reviewer, permanently damp.</p>
        <div class="ms-stat-row u-mt-4">
            <div class="ms-stat"><span class="ms-stat__label">Posts</span>
                <span class="ms-stat__value">1,284</span></div>
            <div class="ms-stat"><span class="ms-stat__label">Followers</span>
                <span class="ms-stat__value">3,410</span></div>
            <div class="ms-stat"><span class="ms-stat__label">Following</span>
                <span class="ms-stat__value">288</span></div>
        </div>
    </div>

    <div class="ms-tabs u-mt-4">
        <nav class="ms-tab-nav">
            <a class="ms-tab-nav__item ms-tab-nav__item--active" href="#">Posts</a>
            <a class="ms-tab-nav__item" href="#">Replies</a>
            <a class="ms-tab-nav__item" href="#">Media</a>
            <a class="ms-tab-nav__item" href="#">About</a>
        </nav>
    </div>

    <div class="u-grid u-grid-cols-12 u-mt-4 u-mb-8">
        <div class="u-col-12 u-col-md-8">
            <div class="ms-card">
                <p><strong>Cape Wrath in September &mdash; worth it?</strong></p>
                <p class="ms-stat__meta">18 replies &middot; 3 days ago</p>
            </div>
            <div class="ms-card">
                <p><strong>Three years on one pair of boots</strong></p>
                <p class="ms-stat__meta">42 replies &middot; last week</p>
            </div>
        </div>
        <div class="u-col-12 u-col-md-4">
            <div class="ms-card ms-card--flat">
                <h2>Badges</h2>
                <div class="ms-chip-set">
                    <span class="ms-chip">Regular</span>
                    <span class="ms-chip">Gear reviewer</span>
                    <span class="ms-chip">5 years</span>
                </div>
            </div>
        </div>
    </div>
</div>

More community layouts