Page hero

The header for a page that is not an article. Used on 2 of 108 pages today, which is why every other page starts differently.

A price page

Cost of living

Petrol price in Nigeria

Official figures by state from the National Bureau of Statistics, set beside what outlets are reporting this week.

Official data to May 2026 · reported prices updated daily

HTML

<header class="p234-pagehero">
  <span class="p234-kicker" data-section="markets">Cost of living</span>
  <h1 class="p234-pagehero__title">Petrol price in Nigeria</h1>
  <p class="p234-pagehero__standfirst">Official figures by state from the National Bureau of Statistics, set beside what outlets are reporting this week.</p>
  <p class="p234-pagehero__meta">Official data to May 2026 &middot; reported prices updated daily</p>
</header>

A section front

Business

Corporate filings, results and the companies behind them.

HTML

<header class="p234-pagehero">
  <h1 class="p234-pagehero__title">Business</h1>
  <p class="p234-pagehero__standfirst">Corporate filings, results and the companies behind them.</p>
</header>

A state page

News by state

Kano

42 stories this month · official state announcements included

HTML

<header class="p234-pagehero">
  <span class="p234-kicker">News by state</span>
  <h1 class="p234-pagehero__title">Kano</h1>
  <p class="p234-pagehero__meta">42 stories this month &middot; official state announcements included</p>
</header>

Why it matters

Every page that is not an article needs a header saying what the page is and how current it is. There is a component for this and 106 of 108 pages do not use it, so each one invented its own heading size, spacing and rule. This is the single cheapest consistency win in the migration.

Rules

One h1 per page, and it lives here.
Say how current the page is in the meta line. On a data page that is not decoration: the official series runs about four months behind.
Keep the standfirst to one sentence that says what the page is for.

Do not use it on an article. An article's headline is the story, set in display-2, not a page title.
Do not add a background image or a coloured band behind it. The thick rule underneath is the whole device.
Do not repeat the breadcrumb's words in the title.

Tokens this component reads

--p234-color-ink--p234-color-ink-muted--p234-type-display-2-*--p234-type-standfirst-*--p234-type-meta-*--p234-space-4--p234-space-5--p234-space-7--p234-measure-text--p234-border-thick