← All layouts · Media
Video library
Featured player, rails by topic and a continue-watching row.
Continue watching comes first, because the likeliest thing somebody wants is the thing they did not finish.
- .ms-card
- .ms-thumb
- .ms-btn
- .ms-progress
- .ms-hero
- .ms-stat
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="#">Reel</a></div>
<nav class="ms-topbar__nav"><a href="#">Browse</a><a href="#">Series</a><a href="#">My list</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-hero ms-hero--split" style="padding:2rem 0">
<div>
<span class="ms-badge ms-badge--primary">Featured</span>
<h1 class="ms-hero__title" style="font-size:clamp(1.7rem,3.5vw,2.6rem)">
The Long Way North</h1>
<p class="ms-hero__sub">Three walkers, 320 kilometres, and one river that would
not let them past. A feature documentary.</p>
<div class="ms-hero__actions">
<a class="ms-btn ms-btn--primary ms-btn--lg" href="#">
<span class="material-icons">play_arrow</span> Play</a>
<a class="ms-btn ms-btn--outline ms-btn--lg" href="#">Add to my list</a>
</div>
</div>
<span class="ms-thumb"></span>
</div>
<h2 class="u-mt-6">Continue watching</h2>
<div class="u-grid u-grid-cols-12">
<div class="u-col-6 u-col-md-3"><div class="ms-card ms-card--media ms-card--interactive ms-card--fill">
<span class="ms-thumb ms-card__media"></span>
<div class="ms-card__body">
<div class="ms-progress"><div class="ms-progress__bar" style="width:64%"></div></div>
<strong>Ridge Lines, ep 3</strong>
<p class="ms-stat__meta">18 minutes left</p>
</div></div></div>
<div class="u-col-6 u-col-md-3"><div class="ms-card ms-card--media ms-card--interactive ms-card--fill">
<span class="ms-thumb ms-card__media"></span>
<div class="ms-card__body">
<div class="ms-progress"><div class="ms-progress__bar" style="width:22%"></div></div>
<strong>Winter Bothy</strong>
<p class="ms-stat__meta">51 minutes left</p>
</div></div></div>
<div class="u-col-6 u-col-md-3"><div class="ms-card ms-card--media ms-card--interactive ms-card--fill">
<span class="ms-thumb ms-card__media"></span>
<div class="ms-card__body">
<div class="ms-progress"><div class="ms-progress__bar" style="width:88%"></div></div>
<strong>Coast to Coast</strong>
<p class="ms-stat__meta">6 minutes left</p>
</div></div></div>
<div class="u-col-6 u-col-md-3"><div class="ms-card ms-card--media ms-card--interactive ms-card--fill">
<span class="ms-thumb ms-card__media"></span>
<div class="ms-card__body">
<strong>Gear Talk, ep 12</strong>
<p class="ms-stat__meta">Not started</p>
</div></div></div>
</div>
<h2 class="u-mt-6">Because you watched Ridge Lines</h2>
<div class="u-grid u-grid-cols-12 u-mb-8">
<div class="u-col-6 u-col-md-2"><span class="ms-thumb ms-thumb--portrait"></span>
<p><strong>High Places</strong></p></div>
<div class="u-col-6 u-col-md-2"><span class="ms-thumb ms-thumb--portrait"></span>
<p><strong>The Bothy Year</strong></p></div>
<div class="u-col-6 u-col-md-2"><span class="ms-thumb ms-thumb--portrait"></span>
<p><strong>Nine Rivers</strong></p></div>
<div class="u-col-6 u-col-md-2"><span class="ms-thumb ms-thumb--portrait"></span>
<p><strong>Cairn</strong></p></div>
<div class="u-col-6 u-col-md-2"><span class="ms-thumb ms-thumb--portrait"></span>
<p><strong>Slate</strong></p></div>
<div class="u-col-6 u-col-md-2"><span class="ms-thumb ms-thumb--portrait"></span>
<p><strong>Low Cloud</strong></p></div>
</div>
</div>