/// Navigation
PageHeader
Page title row — an optional icon tile and eyebrow, an h1, a lead line, a meta-badges slot and an actions slot, closed by a bottom hairline.
import { PageHeader } from "@protocore/pds";Basics
At minimum a title — add an eyebrow for context and a lead line to summarise the page. The bottom hairline separates it from the content below.
Ethereum Mainnet
Endpoint status, verifier set, and recent message throughput.
Icon, meta and actions
The icon slot frames a leading glyph in a 32px tile, meta renders status Badges beside the title, and actions pins buttons to the right (stacking below on mobile).
Ethereum Mainnet
Endpoint status, verifier set, and recent message throughput.
When to use it
Use PageHeader once per screen, at the top, to name the page and expose its top-level actions. It anchors the layout and gives every page a consistent title row.
- Sits directly under a Breadcrumb on nested routes — the crumb shows the path, the header restates the leaf.
- Just a mono kicker above a section, not a whole page? Use Eyebrow on its own.
- Grouping content within a page below the header? Use Section.
- Put page-level KPIs in a StatStrip beneath the header rather than crowding the title row.
Usage
Do
- Use exactly one PageHeader per page, as the first element of the main content.
- Put the page's primary action in the actions slot; keep it to one or two buttons.
- Use meta for status Badges (environment, health), not for long prose.
- Keep the title short — the lead line carries the explanation.
Don't
- Don't nest a PageHeader inside a card or a section — it owns the page top.
- Don't stack multiple headers to fake a hierarchy; use Section headings instead.
- Don't overload actions with a whole toolbar of buttons — move overflow into a menu.
- Don't restate the breadcrumb leaf verbatim if it adds nothing.
Accessibility
- The title renders as the page's `<h1>`; keep one PageHeader per page so the document has a single top-level heading.
- The icon tile is `aria-hidden` decoration — never rely on it to convey meaning the title doesn't.
- Buttons in the actions slot bring their own labels; icon-only actions must carry an `aria-label`.
PageHeader props
| Prop | Type | Default | Description |
|---|---|---|---|
actions | ReactNode | — | Actions slot pinned to the right (e.g. buttons); stacks below on mobile. |
className | string | — | |
eyebrow | ReactNode | — | Mono uppercase eyebrow above the title (e.g. an `<Eyebrow>` or plain text). |
icon | ReactNode | — | Optional leading icon, framed in a 32px square surface-2 tile beside the title. |
lead | ReactNode | — | Supporting lead line beneath the title. |
meta | ReactNode | — | Meta badges slot rendered inline beside the title (e.g. status Badges). |
style | CSSProperties | — | |
title * | ReactNode | — | The page title — rendered as the `<h1>`. |