Masthead

Code

Copy the markup

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/masthead.min.css" integrity="sha384-Z8LZh/hdX8e75aVw/+7wsEa/DGjmU5P5Jr3gDfMgW5yUXZw0JBlB1bEZt8nUX9nx" crossorigin="anonymous">

With catalog's search in the top row:

<header class="luz-masthead">
  <div class="o-container o-container--inline o-stack">
    <div class="o-row luz-masthead__top">
      <p class="luz-masthead__date"><time datetime="2026-10-14">Wednesday, 14 October 2026</time></p>
      <div class="o-row luz-masthead__actions">
        <luz-search>…</luz-search>
      </div>
    </div>
    <a class="luz-masthead__brand" href="/">The Vejer Review</a>
    <div class="o-row luz-masthead__sections">
      <button class="luz-nav-toggle" type="button" popovertarget="masthead-nav" aria-label="Sections">…</button>
      <nav class="luz-navbar" id="masthead-nav" aria-label="Sections" popover>…</nav>
    </div>
  </div>
</header>

Variants and options

No modifiers. The masthead is a class of catalog on a native <header>, laid out by core's objects in the markup.

How it works

CSS from components/masthead.css of @luz-ds/catalog on core's objects and the catalog's navbar. No JavaScript.

• The masthead adds the skin only: the page surface, the brand, the rules of the sections row and the date. Core gives the rest: .o-container--inline the gutters, .o-row and .o-stack the rows, and the navbar the links and their panel.
• The masthead is not sticky: three rows stuck to the top would take a third of a phone's screen. Its brand is 49 px from 1024 px, 39 px below and 31 px at 640 px and below (--luz-text-4xl, -3xl and -2xl, the steps of the hero).
• The masthead, and the sections row inside it, name themselves the anchor --luz-bar, scoped to themselves. Where the browser supports CSS anchor positioning, the navbar's panel opens under the sections row. Elsewhere it opens at --luz-bar-h from the top of the window (see Known issues).
• With @luz-ds/catalog, the list of its <luz-lang-switch> opens under the masthead. Without it nothing changes: the rules that refine the catalog's elements match nothing.

Without JavaScript

Nothing changes: the menu is a popover opened by the button's popovertarget, with no script, the links are plain links, and catalog's search shows its link to the A–Z index.

Keyboard and ARIA

• Order: the order of the source: the actions of the top row, the brand, then the menu button and the sections.
• Keys: Enter or Space on the menu button opens and closes the panel; Escape closes it and returns focus to the button. The panel is not modal: Tab after its last link moves on.
• Names: the <nav> and the menu button are both named "Sections"; the browser exposes the button's expanded state. The section of an article has aria-current="true", the section's own index aria-current="page"; both are underlined.
• Brand: a link, never a heading: the story's title is the page's one h1. A logo is an <img> whose alt is the publication's name, with no text beside it.
• Landmarks: a <header> that is a direct child of <body> is the banner. Put the skip link before it.

Contrast and focus are in the Design tab.

Design

When to use

Use the masthead at the top of a newspaper's front page and of its sections, where the name and the date set the tone and the reader reaches every section.

When not to use

Do not use it on every page of a blog: for one row that stays at the top, use the site header with --publication.

• One header per page, never inside a component or an article: it is the page's banner.
• Do not make the masthead sticky, and do not put the date in a one-row bar: in one row it competes with the name.

Do and don't

Writing the content

The brand is the publication's name; the sections are the names readers use for its parts.

• Brand: the name in full, as it appears on the publication. It wraps at a narrow width; never shorten it with an ellipsis.
• Sections: four to seven, one or two words each, the same words as the titles of their index pages.
• Date: written out in the language of the page, "Wednesday, 14 October 2026", with the same day in datetime.
• Menu button: "Sections", translated like the rest of the page.

Contrast and focus

Text sits on the page surface, in the rows and in the open panel. The scrim starts under the masthead, so it is never dimmed.

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: every link and button in the header keeps core's ring, 2 px of --luz-focus-ring. The current section has an underline as well as its colour, so the mark does not depend on colour.
• Edges: the two rules of the sections row (--luz-divider) are decorative and have no minimum; forced colours keep them.

Tokens it uses

The 15 tokens that the .luz-masthead rules of catalog’s components/masthead.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-divider, --luz-surface-page, --luz-text-primary, --luz-text-secondary

Spacing and sizing

--luz-control-lg, --luz-space-2xs, --luz-space-md, --luz-space-xs

Typography

--luz-font-heading, --luz-font-sans, --luz-text-2xl, --luz-text-3xl, --luz-text-4xl, --luz-text-sm

Layout and breakpoints

--luz-bar-h

Keyboard and ARIA are in the Code tab.