← All layouts · Media
Podcast episode
Episode with player, chapters, transcript and show notes.
Chapters are links into the audio and the transcript is real text, which is the difference between an episode page and a play button with decoration.
- .ms-btn
- .ms-stat
- .ms-card
- .ms-toolbar
- .ms-input
- .ms-progress
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-8">
<div class="u-grid u-grid-cols-12">
<div class="u-col-12 u-col-lg-8">
<div class="ms-card ms-card--horizontal">
<span class="ms-thumb ms-thumb--square"></span>
<div>
<span class="ms-badge">Episode 48</span>
<h1 style="margin:0.25rem 0">Who owns the delay data?</h1>
<p class="ms-stat__meta">22 August 2026 · 54 minutes</p>
<div class="ms-toolbar u-mt-2">
<button class="ms-btn ms-btn--primary">
<span class="material-icons">play_arrow</span> Play</button>
<button class="ms-btn ms-btn--outline ms-btn--sm">Download</button>
<button class="ms-btn ms-btn--ghost ms-btn--sm">Share</button>
</div>
</div>
</div>
<div class="ms-card">
<div class="ms-toolbar" style="margin:0">
<span class="ms-stat__meta">12:04</span>
<div class="ms-progress" style="flex:1">
<div class="ms-progress__bar" style="width:22%"></div></div>
<span class="ms-stat__meta">54:11</span>
<span class="ms-chip">1.25×</span>
</div>
</div>
<div class="ms-card">
<h2>About this episode</h2>
<div class="ms-prose">
<p>Fourteen rail operators have four months to publish journey-level
punctuality figures. We talk to the campaigner who spent nine years
asking for them and the regulator who finally said yes.</p>
</div>
<h2 class="u-mt-6">Chapters</h2>
<table class="ms-table ms-table--compact">
<tr><td class="ms-stat__meta">00:00</td><td>Cold open</td></tr>
<tr><td class="ms-stat__meta">02:40</td><td>What the determination actually says</td></tr>
<tr><td class="ms-stat__meta">18:15</td><td>Nine years of freedom of information requests</td></tr>
<tr><td class="ms-stat__meta">36:02</td><td>What operators say it will cost</td></tr>
<tr><td class="ms-stat__meta">49:30</td><td>What to watch for in December</td></tr>
</table>
</div>
</div>
<aside class="u-col-12 u-col-lg-4">
<div class="ms-card ms-card--flat">
<h2>Subscribe</h2>
<button class="ms-btn ms-btn--outline u-w-full">Apple Podcasts</button>
<button class="ms-btn ms-btn--outline u-w-full u-mt-2">Spotify</button>
<button class="ms-btn ms-btn--outline u-w-full u-mt-2">RSS</button>
</div>
<div class="ms-card ms-card--flat">
<h2>Recent episodes</h2>
<p><strong>47.</strong> <a class="u-link" href="#">The warehouse rent plateau</a>
<br><span class="ms-stat__meta">15 August · 48 min</span></p>
<hr class="ms-divider">
<p><strong>46.</strong> <a class="u-link" href="#">Insurance renewals and small carriers</a>
<br><span class="ms-stat__meta">8 August · 51 min</span></p>
</div>
</aside>
</div>
</div>