Catalog · Page structure
Blog page header
Gives a page that is not an article, such as About or Contact, its title and one sentence about what it is for.
Fits best: blog — a page that is not an article, such as About or Contact
Example
The header of an About page, with its title and one sentence.
About the Review
An independent paper for Vejer and the coast, paid for by its readers.
Known issues
None known.
Code
Copy the markup
import "@luz-ds/catalog/components/page-header.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-header.min.css" integrity="sha384-ztr1TpMlxsr0pNxReBhVERsfWxHXAiYMNVCFT+0huLQ7YHwnUvU04TQSacaMQClw" crossorigin="anonymous"><div class="luz-page-header">
<h1 class="luz-page-header__title">About the Review</h1>
<p class="luz-page-header__lead">An independent paper for Vejer and the coast, paid for by its readers.</p>
</div>Variants and options
There are no modifiers. The lead is optional.
| Class | What it does |
|---|---|
.luz-page-header | The block, with 32 px of space below it |
.luz-page-header | The title: heading font, 3xl size, light weight; 2xl at 640 px and below |
.luz-page-header | One paragraph in the secondary text colour, 600 px wide at most |
How it works
A wrapper with a title and a lead, styled by components/page-header.css of @luz-ds/catalog. No JavaScript.
- The classes change the look only. The title must be the page's
<h1>. - In Arabic the title has no letter-spacing, which would break the joins of the script.
- A story has the article header instead, with its section, standfirst and byline.
Without JavaScript
Nothing changes: the page header is HTML and CSS.
Keyboard and ARIA
The page header has no interaction.
- An
<h1>title lets screen reader users find the page title from the heading list. - Keep it inside
<main>, so the skip link lands right before it.
Contrast and focus are in the Design tab.
Design
When to use
Use a page header at the top of a page of a blog or a newspaper that is not a story (About, Contact, a section's index) to give its title and one sentence about what it is for.
When not to use
Do not use it for a section inside the page: use a plain heading of the right level.
- One page header per page.
- A story takes the article header, which has its author and date.
Do and don't
Writing the content
The title names the page in a few words, in sentence case.
- The lead is one sentence, under 25 words, that says what the reader can do here.
- Match the title to the link that led here and to the start of
<title>.
Contrast and focus
The title is primary text and the lead secondary text, on the 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 |
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 header takes none.
Tokens it uses
The 8 tokens that the .luz-page-header rules of catalog’s components/page-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.
- Spacing and sizing
--luz-space-2xs,--luz-space-xl- Typography
--luz-font-heading,--luz-text-2xl,--luz-text-3xl,--luz-text-base
Keyboard and ARIA are in the Code tab.