← All layouts  ·  Community

Forum thread

Threaded discussion with a reply composer.

The original post is set apart from replies, and the composer sits at the bottom where somebody arrives after reading rather than at the top where it interrupts.

  • .ms-toolbar
  • .ms-btn
  • .ms-card
  • .ms-stat
  • .ms-avatar-md
  • .ms-breadcrumb-item

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>

<div class="u-container u-py-6">
    <nav class="ms-breadcrumb">
        <span class="ms-breadcrumb-item"><a class="ms-breadcrumb-link" href="#">Categories</a></span>
        <span class="ms-breadcrumb-item"><a class="ms-breadcrumb-link" href="#">Routes</a></span>
        <span class="ms-breadcrumb-item">Cape Wrath in September</span>
    </nav>

    <h1>Cape Wrath in September &mdash; worth it?</h1>
    <p class="ms-stat__meta">18 replies &middot; started 3 days ago</p>

    <div class="ms-card ms-card--accent">
        <div class="ms-toolbar">
            <span class="ms-avatar-md">ER</span>
            <div><strong>Ellie Roberts</strong>
                <p class="ms-stat__meta">Original poster &middot; 3 days ago</p></div>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-badge">Regular</span>
        </div>
        <div class="ms-prose">
            <p>Thinking of walking the Cape Wrath Trail from Fort William in the second week
                of September. Midges should be easing off by then, but I am told the river
                crossings get serious after rain.</p>
            <p>Anyone done it that late in the year?</p>
        </div>
    </div>

    <div class="ms-card">
        <div class="ms-toolbar">
            <span class="ms-avatar-md">JD</span>
            <div><strong>James Doyle</strong><p class="ms-stat__meta">3 days ago</p></div>
        </div>
        <p>Did it last September. The midges were gone by the 8th or so. The crossings are
            the real question &mdash; we waited a day at Strabeg for the water to drop.</p>
        <div class="ms-toolbar">
            <button class="ms-btn ms-btn--sm ms-btn--ghost">Reply</button>
            <span class="ms-badge">12 helpful</span>
        </div>
    </div>

    <div class="ms-card">
        <div class="ms-toolbar">
            <span class="ms-avatar-md">TM</span>
            <div><strong>Tom Mercer</strong><p class="ms-stat__meta">2 days ago</p></div>
        </div>
        <p>Take an extra day of food for exactly that reason. Nothing worse than being on
            rations because a river said no.</p>
    </div>

    <div class="ms-card">
        <h2>Reply</h2>
        <form class="ms-form">
            <div class="ms-field">
                <label class="ms-label" for="reply">Your reply</label>
                <textarea class="ms-input" id="reply" rows="4"></textarea>
                <p class="ms-form-help">Be useful. <span class="ms-kbd">Ctrl</span> +
                    <span class="ms-kbd">Enter</span> to post.</p>
            </div>
            <button class="ms-btn ms-btn--primary">Post reply</button>
        </form>
    </div>
</div>

More community layouts

Forum index
Social feed
User profile
Chat
Comment thread