← All layouts · Media
Music player
Library, queue and a persistent transport bar.
The transport bar is fixed and always present, because a player you have to scroll to find is broken.
- .ms-btn
- .ms-sidenav
- .ms-stat
- .ms-shell
- .ms-thumb
- .ms-toolbar
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.
<div class="ms-shell">
<aside class="ms-shell__sidebar">
<div class="ms-shell__brand">Reel Audio</div>
<ul class="ms-sidenav">
<li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" href="#">
<span class="material-icons">library_music</span>Library</a></li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">
<span class="material-icons">search</span>Search</a></li>
<li class="ms-sidenav__section">Playlists</li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">Long drives</a></li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">Slow mornings</a></li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">Workshop</a></li>
</ul>
</aside>
<div class="ms-shell__main">
<div class="ms-shell__body">
<div class="u-grid u-grid-cols-12">
<div class="u-col-12 u-col-md-4"><span class="ms-thumb ms-thumb--square"></span></div>
<div class="u-col-12 u-col-md-8">
<span class="ms-badge">Album</span>
<h1>Field Recordings</h1>
<p class="ms-stat__meta">Ridge Lines · 2025 · 11 tracks · 42 min</p>
<div class="ms-toolbar u-mt-4">
<button class="ms-btn ms-btn--primary">
<span class="material-icons">play_arrow</span> Play</button>
<button class="ms-btn ms-btn--outline">Shuffle</button>
<button class="ms-btn ms-btn--ghost">
<span class="material-icons">favorite_border</span></button>
</div>
</div>
</div>
<div class="ms-card ms-card--flush u-mt-4">
<table class="ms-table ms-table--compact ms-table--striped">
<tbody>
<tr><td style="width:2rem">1</td><td><strong>Low Cloud</strong></td>
<td class="ms-stat__meta">Ridge Lines</td>
<td class="u-text-right ms-stat__meta">3:41</td></tr>
<tr style="background:#f5f9ff"><td>
<span class="material-icons" style="font-size:1rem">graphic_eq</span></td>
<td><strong>Sandwood</strong></td>
<td class="ms-stat__meta">Ridge Lines</td>
<td class="u-text-right ms-stat__meta">4:12</td></tr>
<tr><td>3</td><td><strong>Strabeg</strong></td>
<td class="ms-stat__meta">Ridge Lines</td>
<td class="u-text-right ms-stat__meta">5:08</td></tr>
<tr><td>4</td><td><strong>Cairn</strong></td>
<td class="ms-stat__meta">Ridge Lines</td>
<td class="u-text-right ms-stat__meta">2:54</td></tr>
</tbody>
</table>
</div>
</div>
<div style="position:sticky; bottom:0; background:#fff; border-top:1px solid #e5e5e5; padding:0.75rem 1.5rem">
<div class="ms-toolbar" style="margin:0">
<span class="ms-thumb ms-thumb--square" style="width:44px"></span>
<div><strong>Sandwood</strong>
<p class="ms-stat__meta" style="margin:0">Ridge Lines</p></div>
<span class="ms-toolbar__spacer"></span>
<button class="ms-btn ms-btn--ghost ms-btn--sm">
<span class="material-icons">skip_previous</span></button>
<button class="ms-btn ms-btn--primary ms-btn--sm">
<span class="material-icons">pause</span></button>
<button class="ms-btn ms-btn--ghost ms-btn--sm">
<span class="material-icons">skip_next</span></button>
<span class="ms-toolbar__spacer"></span>
<span class="ms-stat__meta">1:48</span>
<div class="ms-progress" style="width:260px">
<div class="ms-progress__bar" style="width:43%"></div></div>
<span class="ms-stat__meta">4:12</span>
</div>
</div>
</div>
</div>