← All layouts · Community
Social feed
Composer, feed and a suggestions rail.
Three columns on desktop collapsing to one on a phone, with the feed -- not the rail -- surviving the collapse.
- .ms-btn
- .ms-sidenav
- .ms-toolbar
- .ms-card
- .ms-stat
- .ms-avatar-md
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="u-grid u-grid-cols-12">
<aside class="u-col-12 u-col-lg-3">
<div class="ms-card ms-card--flush" style="position:sticky; top:1rem">
<ul class="ms-sidenav">
<li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" href="#">
<span class="material-icons">home</span>Home</a></li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
<span class="material-icons">tag</span>Explore</a></li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
<span class="material-icons">notifications</span>Notifications</a></li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
<span class="material-icons">bookmark</span>Saved</a></li>
</ul>
</div>
</aside>
<div class="u-col-12 u-col-lg-6">
<div class="ms-card">
<div class="ms-toolbar">
<span class="ms-avatar-md">ER</span>
<input class="ms-input" placeholder="Say something">
</div>
<div class="ms-toolbar">
<button class="ms-btn ms-btn--ghost ms-btn--sm"><span class="material-icons">image</span></button>
<button class="ms-btn ms-btn--ghost ms-btn--sm"><span class="material-icons">place</span></button>
<span class="ms-toolbar__spacer"></span>
<button class="ms-btn ms-btn--primary ms-btn--sm">Post</button>
</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">2 hours ago</p></div>
</div>
<p>Two days on the Rhinogs and not another person the whole time. Bring more
water than you think.</p>
<span class="ms-thumb"></span>
<div class="ms-toolbar u-mt-2">
<button class="ms-btn ms-btn--ghost ms-btn--sm">42 likes</button>
<button class="ms-btn ms-btn--ghost ms-btn--sm">8 replies</button>
<button class="ms-btn ms-btn--ghost ms-btn--sm">Share</button>
</div>
</div>
<div class="ms-card">
<div class="ms-toolbar">
<span class="ms-avatar-md">PK</span>
<div><strong>Priya Kaur</strong><p class="ms-stat__meta">5 hours ago</p></div>
</div>
<p>Finally replaced the boots I have been resoling since 2019. Sad day.</p>
<div class="ms-toolbar u-mt-2">
<button class="ms-btn ms-btn--ghost ms-btn--sm">18 likes</button>
<button class="ms-btn ms-btn--ghost ms-btn--sm">3 replies</button>
</div>
</div>
</div>
<aside class="u-col-12 u-col-lg-3">
<div class="ms-card">
<h2>Trending</h2>
<p><a class="u-link" href="#">#capewrath</a><br>
<span class="ms-stat__meta">128 posts today</span></p>
<p><a class="u-link" href="#">#wildcamping</a><br>
<span class="ms-stat__meta">94 posts today</span></p>
</div>
<div class="ms-card">
<h2>People to follow</h2>
<div class="ms-toolbar">
<span class="ms-avatar-sm">TM</span>
<span>Tom Mercer</span>
<span class="ms-toolbar__spacer"></span>
<button class="ms-btn ms-btn--sm ms-btn--outline">Follow</button>
</div>
</div>
</aside>
</div>
</div>