← All layouts · Publishing
News front page
A lead story, secondary pieces and a section rundown.
A front page makes a judgement about weight: one lead at a size that says so, three seconds beneath it, then a list. Equal-sized cards are a directory, not a front page.
- .ms-card
- .ms-stat
- .ms-badge
- .ms-thumb
- .ms-btn
- .ms-divider
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="#">The Meridian</a></div>
<nav class="ms-topbar__nav">
<a href="#">News</a><a href="#">Business</a><a href="#">Culture</a><a href="#">Opinion</a>
</nav>
<a class="ms-btn ms-btn--primary ms-btn--sm" href="#">Subscribe</a>
</header>
<div class="u-container u-py-6">
<div class="u-grid u-grid-cols-12">
<div class="u-col-12 u-col-lg-8">
<article class="ms-card">
<span class="ms-badge ms-badge--danger">Breaking</span>
<h1 style="font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.12">
Rail operators told to publish delay data in full by December</h1>
<p style="font-size:1.1rem">The regulator has given fourteen operators four
months to release journey-level punctuality figures, ending a decade of
aggregated reporting that campaigners called unusable.</p>
<span class="ms-thumb"></span>
<p class="ms-stat__meta">By Ellie Roberts · 22 August 2026</p>
</article>
</div>
<aside class="u-col-12 u-col-lg-4">
<div class="ms-card ms-card--flat">
<h2>Also this morning</h2>
<p><strong><a class="u-link" href="#">Freight volumes steady as fuel eases</a></strong>
<br><span class="ms-stat__meta">Business · 40 minutes ago</span></p>
<hr class="ms-divider">
<p><strong><a class="u-link" href="#">Kendal flood scheme clears final hurdle</a></strong>
<br><span class="ms-stat__meta">News · 2 hours ago</span></p>
<hr class="ms-divider">
<p><strong><a class="u-link" href="#">Review: a season of small theatres</a></strong>
<br><span class="ms-stat__meta">Culture · 3 hours ago</span></p>
</div>
</aside>
</div>
<div class="u-grid u-grid-cols-12 u-mt-4">
<div class="u-col-12 u-col-md-4"><article class="ms-card ms-card--media ms-card--fill">
<span class="ms-thumb ms-card__media"></span>
<div class="ms-card__body">
<span class="ms-badge">Business</span>
<h3>Small carriers squeezed as insurance renews</h3>
<p class="ms-stat__meta">James Doyle · 4 hours ago</p>
</div></article></div>
<div class="u-col-12 u-col-md-4"><article class="ms-card ms-card--media ms-card--fill">
<span class="ms-thumb ms-card__media"></span>
<div class="ms-card__body">
<span class="ms-badge">Opinion</span>
<h3>The case for publishing the raw numbers</h3>
<p class="ms-stat__meta">Priya Kaur · 5 hours ago</p>
</div></article></div>
<div class="u-col-12 u-col-md-4"><article class="ms-card ms-card--media ms-card--fill">
<span class="ms-thumb ms-card__media"></span>
<div class="ms-card__body">
<span class="ms-badge">Culture</span>
<h3>Forty years of the town brass band</h3>
<p class="ms-stat__meta">Tom Mercer · yesterday</p>
</div></article></div>
</div>
<div class="ms-card u-mt-4">
<h2>More from the desk</h2>
<table class="ms-table ms-table--compact">
<tr><td><span class="ms-badge">News</span></td>
<td><a class="u-link" href="#">Council backs pedestrian scheme</a></td>
<td class="u-text-right ms-stat__meta">21 Aug</td></tr>
<tr><td><span class="ms-badge">Business</span></td>
<td><a class="u-link" href="#">Warehouse rents flatten after two-year climb</a></td>
<td class="u-text-right ms-stat__meta">21 Aug</td></tr>
<tr><td><span class="ms-badge">Culture</span></td>
<td><a class="u-link" href="#">What to see this weekend</a></td>
<td class="u-text-right ms-stat__meta">20 Aug</td></tr>
</table>
</div>
</div>