← All layouts  ·  Community

Forum index

Categories, topic counts and latest activity.

Latest activity is the column people actually scan, so it gets real estate and a face, not a truncated timestamp squeezed against the right edge.

  • .ms-stat
  • .ms-avatar-sm
  • .ms-toolbar
  • .ms-btn
  • .ms-card
  • .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.

<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">
    <div class="ms-toolbar">
        <h1 style="margin:0">Categories</h1>
        <span class="ms-toolbar__spacer"></span>
        <button class="ms-btn ms-btn--primary">New topic</button>
    </div>

    <div class="ms-card ms-card--flush">
        <table class="ms-table">
            <thead><tr><th>Category</th><th class="u-text-right">Topics</th>
                <th class="u-text-right">Posts</th><th>Latest</th></tr></thead>
            <tbody>
                <tr>
                    <td><strong>Introductions</strong>
                        <p class="ms-stat__meta">New here? Start with a wave.</p></td>
                    <td class="u-text-right">482</td><td class="u-text-right">3,910</td>
                    <td><span class="ms-avatar-sm">PK</span> <a class="u-link" href="#">Hello from Skipton</a>
                        <p class="ms-stat__meta">12 minutes ago</p></td>
                </tr>
                <tr>
                    <td><strong>Kit and gear</strong>
                        <p class="ms-stat__meta">What worked, what fell apart.</p></td>
                    <td class="u-text-right">1,204</td><td class="u-text-right">18,442</td>
                    <td><span class="ms-avatar-sm">JD</span> <a class="u-link" href="#">Three-season tents</a>
                        <p class="ms-stat__meta">an hour ago</p></td>
                </tr>
                <tr>
                    <td><strong>Routes</strong>
                        <p class="ms-stat__meta">Where to go and how it went.</p></td>
                    <td class="u-text-right">2,810</td><td class="u-text-right">44,102</td>
                    <td><span class="ms-avatar-sm">ER</span> <a class="u-link" href="#">Cape Wrath in September</a>
                        <p class="ms-stat__meta">3 hours ago</p></td>
                </tr>
                <tr>
                    <td><strong>Site feedback</strong>
                        <p class="ms-stat__meta">Bugs, ideas, complaints.</p></td>
                    <td class="u-text-right">96</td><td class="u-text-right">712</td>
                    <td><span class="ms-avatar-sm">TM</span> <a class="u-link" href="#">Dark mode please</a>
                        <p class="ms-stat__meta">yesterday</p></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

More community layouts

Forum thread
Social feed
User profile
Chat
Comment thread