Section front

One lead, a few strong secondaries, compact supporting items. The importance of every story apparent before a word is read.

The shape

A front is three tiers and no more. One lead at display-1. Two or three secondaries at headline. Everything else compact, in a rail or under a rule.

Three tiers is enough to rank a page and few enough that the ranking is legible. Four tiers reads as a gradient, which is the same as no ranking at all.

Section front

Market intelligence

Pump prices are running 25 per cent above the last official figure

NBS puts Lagos petrol at 1,077 naira in May. Reporting from this week puts it between 1,270 and 1,345. The gap is the story.

Plus234Feed · 2 hours ago 6 sources

Politics

Senate passes the 2027 appropriation bill at second reading

The chamber moved the bill after ninety minutes of debate on the capital component.

Channels Television·4 hours ago3 sources

Business

UBA board approves nine-month unaudited financials

The filing closes the period and sets the date for the next board meeting.

NGX filing·1 hour ago

Also today

World

<div style="display:grid;gap:var(--p234-space-7);grid-template-columns:2fr 1fr">
  <div>
    <a class="p234-story p234-story--lead" href="#">
      <span class="p234-kicker" data-section="markets">Market intelligence</span>
      <h3 class="p234-story__headline">Pump prices are running 25 per cent above the last official figure</h3>
      <p class="p234-story__standfirst">NBS puts Lagos petrol at 1,077 naira in May. Reporting from this week puts it between 1,270 and 1,345. The gap is the story.</p>
      <div class="p234-meta">
        <span class="p234-meta__source">Plus234Feed</span>
        <span class="p234-meta__dot">&middot;</span>
        <span>2 hours ago</span>
        <span class="p234-coverage">6 sources</span>
      </div>
    </a>
    <a class="p234-story p234-story--secondary" href="#">
      <span class="p234-kicker" data-section="politics">Politics</span>
      <h3 class="p234-story__headline">Senate passes the 2027 appropriation bill at second reading</h3>
      <p class="p234-story__standfirst">The chamber moved the bill after ninety minutes of debate on the capital component.</p>
      <div class="p234-meta"><span class="p234-meta__source">Channels Television</span><span class="p234-meta__dot">&middot;</span><span>4 hours ago</span><span class="p234-coverage">3 sources</span></div>
    </a>
    <a class="p234-story p234-story--secondary" href="#">
      <span class="p234-kicker" data-section="business">Business</span>
      <h3 class="p234-story__headline">UBA board approves nine-month unaudited financials</h3>
      <p class="p234-story__standfirst">The filing closes the period and sets the date for the next board meeting.</p>
      <div class="p234-meta"><span class="p234-meta__source">NGX filing</span><span class="p234-meta__dot">&middot;</span><span>1 hour ago</span></div>
    </a>
  </div>
  <div>
    <p class="p234-kicker" style="color:var(--p234-color-ink-muted);border-top:var(--p234-border-thick) solid var(--p234-color-ink);padding-top:var(--p234-space-4)">Also today</p>
    <a class="p234-story p234-story--compact" href="#">
      <span class="p234-kicker" data-section="world">World</span>
      <h3 class="p234-story__headline">Canada releases list of 36 countries whose citizens can apply</h3>
      <div class="p234-meta"><span>IRCC</span><span class="p234-meta__dot">&middot;</span><span>yesterday</span></div>
    </a>
    <a class="p234-story p234-story--compact" href="#">
      <span class="p234-kicker" data-section="sport">Sport</span>
      <h3 class="p234-story__headline">Super Eagles name a 23-man squad for the qualifier</h3>
      <div class="p234-meta"><span>NFF</span><span class="p234-meta__dot">&middot;</span><span>yesterday</span></div>
    </a>
    <a class="p234-story p234-story--compact" href="#">
      <span class="p234-kicker" data-section="markets">Markets</span>
      <h3 class="p234-story__headline">BUA Foods shifts Q3 board meeting by one day</h3>
      <div class="p234-meta"><span>NGX filing</span><span class="p234-meta__dot">&middot;</span><span>2 days ago</span></div>
    </a>
  </div>
</div>

Rules

One lead. Always exactly one.
Let the compact rail hold more items than feels comfortable. A dense list of real headlines is a newspaper; a sparse grid of cards is a dashboard.
Keep the section colours as kicker text, which is what stops a mixed front turning into confetti.

Do not give every story an image. An image on the lead and nothing else is a stronger hierarchy than six thumbnails.
Do not repeat a story between tiers. If it led, it does not also appear in the rail.
Do not pad to fill a grid. A front with seven good stories is better than one with twelve.

On a phone

The columns stack, lead first. The compact rail keeps its rules and becomes a continuation of the page rather than a sidebar, which is what it already is on 64 per cent of sessions.