Preview

The default form: a page-title-scale heading with a lede and an actions slot. The container is neutral and transparent — color is the consumer’s job.

<PageHeader title="Requirements" lede="Track and triage every requirement across the program.">
  <Button slot="actions" color="primary" icon="plus">New requirement</Button>
</PageHeader>

Eyebrow + display prominence (hero)

For a landing or hero, add an eyebrow (with an optional leading icon) and bump the title to the display role with prominence="display". The actions here are link-buttons — esa-button with an href.

<PageHeader
  eyebrow="Annual Report"
  icon="award"
  prominence="display"
  title="2026 in Review"
  lede="A year of monitoring, mitigation, and measurable outcomes across the program.">
  <Button slot="actions" color="primary" href="/report">Read the report</Button>
  <Button slot="actions" color="ghost" appearance="outline" href="/data">View the data</Button>
</PageHeader>

With breadcrumbs

Host an esa-breadcrumbs in the breadcrumbs slot for a record or nested page.

<PageHeader title="Permit #4471" lede="Filed 12 days ago · awaiting review.">
  <nav slot="breadcrumbs">Permits / Active / #4471</nav>
  <Button slot="actions" color="ghost" appearance="outline" icon="pencil">Edit</Button>
</PageHeader>

API

Slots

Accessibility

• The title is the page <h1> — there should be exactly one per page; keep heading order sensible below it.
• The host defaults to a <header> landmark; use as="div" when the header is nested inside another landmark.
• The eyebrow icon is decorative (rendered via esa-icon, aria-hidden) — the eyebrow text carries the meaning.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.