Catalog · Page structure

Article header

Opens a story with its section, its title, a standfirst, who wrote it and when, and an optional lead picture.

Fits best: blog — the top of an article, under the site header

components/article-header.css
No JavaScript
Light · Dark · High contrast
No known issues

Example

The header of a story about the tide records of a bay.

What ten years of tide records say about the bay

Volunteers have read the gauge in the port twice a day since 2016. The sea is four centimetres higher, and winter storms now reach the old town's walls.

By Ana Ruiz

12 October 2026 6 min read

The tide gauge in the port, at low tide.

Known issues

None known.

Code

Copy the markup

Bundler

import "@luz-ds/catalog/components/article-header.css";

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/article-header.min.css" integrity="sha384-CcF15TBfLmCLd5Zwh61D6udMRigUVTBJIag9a9m9AiT9rcJkGsbezhKC21x6xdJf" crossorigin="anonymous">

HTML

<header class="luz-article-header">
  <p class="luz-article-header__kicker"><a href="/coast/">Coast</a></p>
  <h1 class="luz-article-header__title">What ten years of tide records say about the bay</h1>
  <p class="luz-article-header__standfirst">Volunteers have read the gauge in the port twice a day since 2016. The sea is four centimetres higher, and winter storms now reach the old town's walls.</p>
  <div class="luz-article-header__byline">
    <span class="luz-avatar luz-avatar--lg"><img src="/authors/ana-ruiz-96.jpg" width="48" height="48" alt=""></span>
    <div>
      <p>By <a href="/authors/ana-ruiz/">Ana Ruiz</a></p>
      <p class="luz-meta"><time datetime="2026-10-12">12 October 2026</time> <span>6 min read</span></p>
    </div>
  </div>
  <figure class="luz-article-header__media">
    <div class="luz-image">
      <img src="/img/tide-gauge-1280.jpg" width="1280" height="720" alt="A green gauge post marked in centimetres, standing in shallow water by a stone quay" fetchpriority="high" decoding="async">
    </div>
    <figcaption>The tide gauge in the port, at low tide. Photo: Ana Ruiz.</figcaption>
  </figure>
</header>

Variants and options

There are no modifiers. Only the title is required: leave out the parts you do not have.

Class	What it does
`.luz-article-header`	The block: its parts one under another, 12 px apart, and 32 px of space below it
`.luz-article-header__kicker`	The section above the title, small capitals in the mono, like the eyebrow of the hero. Optional
`.luz-article-header__title`	The title: heading font, 3xl size, light weight, balanced lines; 2xl at 640 px and below
`.luz-article-header__standfirst`	One or two sentences in the secondary text colour, a size up from the body, 70 characters wide at most. Optional
`.luz-article-header__byline`	A row in the sans that wraps: an avatar, then the author and a meta line with the date. Optional
`.luz-article-header__media`	A `<figure>` with no panel around it, for an image frame and its caption. Optional

How it works

A grid with one column, styled by components/article-header.css of @luz-ds/catalog, loaded after core and the catalog components the page uses. No JavaScript.

Each part styles its text through inheritance, so the class can go on the element that holds the text or on a wrapper around it. A CMS template that wraps the standfirst in a <div> works as well as a bare <p>. In a WordPress block template, give each block its class in className.
The kicker is a link when your sections have pages, or plain text. The title must be the page's <h1>; the classes change the look only.
The lead picture is the image frame of core: it keeps its ratio and shows a flat surface until the picture loads. Do not set loading="lazy" on it: it is near the top of the page.
A date the reader sees is a <time> with a machine-readable datetime. For a story updated after it was published, add a second line: Updated <time datetime="…">…</time>.

Without JavaScript

Nothing changes: the article header is HTML and CSS.

Keyboard and ARIA

The header has no interaction of its own: Tab reaches the kicker's and the author's links, in that order.

The <h1> title lets screen reader users find the story from the heading list. The kicker comes before it in the source, as it does on the screen; it is short, so it does not delay the title.
Inside an <article>, a <header> is not a landmark: no label is needed.
An avatar beside the author's name is decorative: initials get aria-hidden="true", a photo alt="".

Contrast and focus are in the Design tab.

Design

When to use

Use an article header at the top of a story, a post or a report: a page with an author and a date, that people read from start to end.

When not to use

Do not use it for a page with no author or date, such as a contact or a section page: use the page header.

For the first block of a home or a landing page, use the hero.
For a story in a list, use a post card: the header is for the story's own page.

Do and don't

Do A title that says what happened, and a standfirst that adds what the title could not.

Don't A title that hides the news, and a standfirst that repeats the title.

Do A byline with the author's name as text and the date in words.

Don't A photo with no name beside it, and a date only in numbers, which readers in other countries read in another order.

Writing the content

The title says what happened or what the reader will learn, in sentence case, with no full stop. Keep it under 90 characters: lists and search results cut longer ones.

The kicker is one or two words: the section, or the kind of piece ("Analysis", "Interview").
The standfirst is one or two sentences, under 40 words, that add to the title. It is often the description the CMS shows in lists and in search engines.
Write the date in words, with the month spelled out, in the reader's language. "6 min read" counts about 200 words a minute; leave it out on short posts.
The caption says what the picture shows and who took it. The alt describes what someone who cannot see it needs; it never repeats the caption.

Contrast and focus

Every part is text on the page. The avatar keeps the pairs on the avatar page.

Part	Colour on background	Light	Dark	High contrast	Needs
Title	`--luz-text-primary` on `--luz-surface-page`	15.8:1	15.1:1	21.0:1	4.5:1
Kicker, standfirst, byline and caption	`--luz-text-secondary` on `--luz-surface-page`	6.2:1	7.5:1	19.3:1	4.5:1
Links (kicker, author)	`--luz-brand-primary` on `--luz-surface-page`	5.6:1	7.7:1	14.1:1	4.5:1

Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings, borders and icons.

Focus: the header takes none; its links keep core's ring.
Links are underlined, so colour is not the only cue (WCAG 1.4.1).

Tokens it uses

The 14 tokens that the .luz-article-header rules of catalog’s components/article-header.css read, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.

Color: --luz-text-primary, --luz-text-secondary
Spacing and sizing: --luz-space-sm, --luz-space-xl, --luz-space-xs
Typography: --luz-font-heading, --luz-font-mono, --luz-font-sans, --luz-text-2xl, --luz-text-3xl, --luz-text-base, --luz-text-lg, --luz-text-md, --luz-text-xs

Keyboard and ARIA are in the Code tab.