← All layouts · Publishing
Long-form article
Standfirst, body measure, pull quotes and related reading.
The body is set to a reading measure and the furniture hangs off it. Related reading sits at the end, where somebody who finished is deciding what to do next.
- .ms-card
- .ms-btn
- .ms-stat
- .ms-divider
- .ms-prose
- .ms-topbar
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-8" style="max-width:1100px">
<div class="u-grid u-grid-cols-12">
<article class="u-col-12 u-col-lg-8">
<span class="ms-badge">Business</span>
<h1 style="font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.12">
The decade-long argument over who owns delay data</h1>
<p style="font-size:1.15rem; color:#6b7280">Fourteen operators have four months
to publish journey-level figures. The fight to get here says as much about
regulation as about trains.</p>
<p class="ms-stat__meta">By Ellie Roberts · 22 August 2026 · 8 min read</p>
<span class="ms-thumb"></span>
<p class="ms-stat__meta">Passengers at Oxenholme, where punctuality has been
disputed since 2016.</p>
<div class="ms-prose ms-prose--measure u-mt-6">
<p>For ten years the industry published one number a quarter, and for ten
years nobody outside it could say what the number meant. That ends in
December.</p>
<blockquote>If you only publish the average, you have not published
anything anybody can act on.</blockquote>
<p>The regulator's position, set out in a forty-page determination, is that
aggregation had become a way of avoiding scrutiny rather than a way of
simplifying it.</p>
<h2>What changes in December</h2>
<p>Operators must publish arrival times for every scheduled service, in a
machine-readable format, within seven days.</p>
<p>Two of the fourteen have said they will comply early.</p>
</div>
<div class="ms-card ms-card--flat u-mt-6">
<div class="ms-toolbar">
<span class="ms-avatar-md">ER</span>
<div><strong>Ellie Roberts</strong>
<p class="ms-stat__meta">Transport correspondent</p></div>
</div>
</div>
</article>
<aside class="u-col-12 u-col-lg-4">
<div class="ms-card ms-card--flat" style="position:sticky; top:1rem">
<h2>Related</h2>
<p><a class="u-link" href="#">Freight volumes steady as fuel eases</a></p>
<hr class="ms-divider">
<p><a class="u-link" href="#">The case for publishing the raw numbers</a></p>
<hr class="ms-divider">
<p><a class="u-link" href="#">Regulator's determination, in full</a></p>
</div>
</aside>
</div>
</div>