Catalog · Page structure

Hero

Opens a home or landing page with its title, one sentence, the main actions and an optional picture.

Fits best: landing — the top of a landing page, under the header

components/hero.css
No JavaScript
Light · Dark · High contrast
No known issues

Example

The hero of an event page, with its date, its title, its lead and two actions.

12 and 13 May 2027 · Seville

Acme Summit 2027

Two days of talks and workshops for retail teams.

This column is narrower than 51rem, so the picture goes under the text; on a page of full width it sits beside it. The frame is empty, so it shows its flat surface, and the title is a paragraph: this page already has its <h1>.

New in version 2

Stock counts that keep up with the shop

Acme Stock updates every shelf as it sells, so you reorder before it runs out.

Start free trial Book a demo

The same hero with luz-hero--centered: one column at any width, the text centred. A picture that bleeds cannot be shown in this column, as it runs to the edges of the window: see Variants and options.

Known issues

None known.

Code

Copy the markup

Bundler

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

HTML

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

HTML

<section class="luz-hero o-grid o-grid--split" aria-labelledby="hero-title">
  <div class="luz-hero__copy">
    <p class="luz-hero__eyebrow">12 and 13 May 2027 · Seville</p>
    <h1 class="luz-hero__title" id="hero-title">Acme Summit 2027</h1>
    <p class="luz-hero__lead">Two days of talks and workshops for retail teams.</p>
    <div class="o-actions">
      <a class="luz-btn luz-btn--primary" href="#register">Register</a>
      <a class="luz-btn luz-btn--outline" href="#programme">See the programme</a>
    </div>
  </div>
  <div class="luz-hero__media">
    <div class="luz-image luz-image--4x3">
      <img src="/img/venue-1280.jpg" width="1280" height="960" alt="The main hall, full, before the opening talk" fetchpriority="high" decoding="async">
    </div>
  </div>
</section>

Variants and options

Two modifiers, --centered and __media--bleed, as in the product page template. The eyebrow, the lead and the picture are optional; with no picture the copy takes the whole width.

The block is a class of the landing on core's split grid.

Class	What it does
`.luz-hero`	On a `<section>` with core's `.o-grid.o-grid--split`: space above it, the gaps, and columns of at least 24rem (`--luz-grid-min`), so two equal columns when each gets 24rem, one below
`.luz-hero--centered`	One column at every width: the copy at most 48rem wide, centred, with its text and actions centred, and the picture under it
`.luz-hero__copy`	The text and the actions, first in the source
`.luz-hero__eyebrow`	A short line above the title, in small capitals of the mono face; the sans in Arabic
`.luz-hero__title`	The title: heading font, 4xl size, balanced lines; 3xl below 1024 px and 2xl at 640 px and below
`.luz-hero__lead`	One or two sentences in the secondary text colour, 70 characters wide at most; xl, lg below 1024 px and base at 640 px and below
`.luz-hero__media`	The second column, holding core's image frame
`.luz-hero__media--bleed`	On the picture of a centred hero: it runs from edge to edge of the window, past the page's gutters, with no sideways scroll. The frame is 16:9 unless you give it a ratio

How it works

A <section> named by its title, laid out by core's split grid and styled by components/hero.css of @luz-ds/catalog. No JavaScript.

The columns are core's split grid, intrinsic: they follow the room the hero has, not the window. A hero as wide as the page splits from about 900 px of window; in a narrow column, or with larger text, it stays one column.
The order is the source order: the copy comes first, on the left in a left-to-right page and on the right in a right-to-left one.
The actions are core's action group, .o-actions: at 640 px and below its buttons stack and take the whole width.
The bleed measures the window without a viewport unit, which counts a scrollbar and scrolls the page sideways: the page's root becomes a size container (container-type: inline-size). The column must be centred in the window, as core's .o-container is.
The em in a title takes the colour of --luz-title-accent, the title's own when it is unset.
The classes change the look only. The title must be the page's <h1>.

Without JavaScript

Nothing changes: the hero is HTML and CSS.

Keyboard and ARIA

The hero has no interaction of its own: Tab reaches its links in the order of the source.

aria-labelledby on the <section> points at the title, so the hero is a region with the page's name.
Keep it first inside <main>, so the skip link lands right before it.

Contrast and focus are in the Design tab.

Design

When to use

Use a hero at the top of a home page, a landing page or a front page, to say in a few words what the site or the event is and what to do first.

When not to use

Do not use it on a page whose reader came to read or to do a task: use a plain <h1> and a lead paragraph, which are smaller.

One hero per page, and only at the top.
Not for a message in the middle of a page: use a section, with core's band if it must stand out.

Do and don't

Do One primary action, and a second one as an outline button.

Don't Three primary buttons: the reader cannot tell which one comes first.

Do A title that names the thing, and a lead that says what it gives the reader.

Don't A slogan for a title, and a lead that repeats it without saying what it is.

Do Centre a short title and one sentence, with one or two actions.

Don't Centre a long paragraph: with no common start edge the eye has to find each line again.

Writing the content

The title says what the site or the event is, in sentence case and in fewer than ten words.

The eyebrow is a fact the reader needs at once (a date and a place, a product name), not a slogan. Leave it out if there is none.
The lead is one or two short sentences: what the reader gets.
Buttons start with a verb and say where they go: "Register", "See the programme".
The picture's alt says what it shows, or is empty if it only decorates. It is the first thing on the page: no loading="lazy".

Contrast and focus

The title is primary text, and the eyebrow and the lead secondary text, on the page. The buttons are core's.

Part	Colour on background	Light	Dark	High contrast	Needs
Eyebrow	`--luz-text-secondary` on `--luz-surface-page`	6.2:1	7.5:1	19.3:1	4.5:1
Title	`--luz-text-primary` on `--luz-surface-page`	15.8:1	15.1:1	21.0:1	4.5:1
Lead	`--luz-text-secondary` on `--luz-surface-page`	6.2:1	7.5:1	19.3: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 hero takes none; its buttons keep the focus ring of the button.
Accent: the em of a title has the title's colour unless you set --luz-title-accent. The colour is yours: check it against the page surface in every mode you ship, as text needs 4.5:1.
Do not put the text over the picture: its contrast would depend on the picture, which no token controls.

Tokens it uses

The 19 tokens that the .luz-hero rules of catalog’s components/hero.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-2xl, --luz-space-3xl, --luz-space-lg, --luz-space-md, --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-4xl, --luz-text-base, --luz-text-lg, --luz-text-xl, --luz-text-xs

Keyboard and ARIA are in the Code tab.