Page header

Anatomy

Code

<GdPageHeader
  eyebrow="Foundations"
  title="Colour"

/>

With actions

Code

<GdPageHeader eyebrow="Reference" title="Documentation" lede="…">
  <template #actions>
    <GdButton size="sm">Changelog</GdButton>
    <GdButton size="sm" variant="primary">Get an API key</GdButton>
  </template>
</GdPageHeader>

The console bar

size="admin" is the third rung, for an operator console — a pipeline graph, a run list, a queue. It is the same component, because a page that has to change how it identifies itself when it gets denser has two headers to keep in step.

Fetch + snapshotHTTP · retry 3

77/77

Parse scheme layersZone, overlay

48/77

Bake tilesVector · z8–z16

waiting

A console header over its canvasTwo lines, no tint and no survey sheet. The bar recedes so the work surface below it does not have to compete.

Code

<GdPageHeader
  size="admin"
  title="Riverton — planning scheme ingest"
  lede="77 councils · v14 · last publish 06:12 · owner data-eng"
>
  <template #status>
    <GdChip size="sm" tone="info">Running</GdChip>
  </template>
  <template #actions>
    <GdButton size="sm" variant="ghost">Versions</GdButton>
    <GdButton size="sm" variant="secondary">Dry run</GdButton>
    <GdButton size="sm" variant="primary">Run pipeline</GdButton>
  </template>
</GdPageHeader>

Three things separate it from compact, and each is about a reader who is working rather than arriving:

No tint, no survey sheet. Both say "a page begins here" — worth paying for on a page you land on, and actively unhelpful above a graph. The canvas below is sunken, so a plain surface and a hairline already read as raised.
The lede returns as a fact strip. compact hides it, rightly — a standfirst at caption size is noise. But an operator's second line is four figures separated by middots, consulted more often than the title, so the prose measure comes off it: a strip that wrapped at 68 characters would break mid-figure.
The title drops to the h3 step. Two lines total. Any taller and the bar is spending viewport on a page the operator navigated to on purpose.

With art

Code

<GdPageHeader eyebrow="Patterns" title="How approvals work" lede="…" tint="green">
  <template #art>
    <GdApprovalStack :required="['building', 'council']" icons-only :size="40" />
  </template>
</GdPageHeader>

API

Props

PropTypeDefault

titlerequiredstring—

The display step — the one 40px line a surface gets, and it steps down to the h1 size below 599px. If a page seems to need two display lines, it is two pages.

eyebrowstring—

The kicker above the title, rendered through `GdEyebrow`. Omit it and the row starts at the title.

ledestring—

The standfirst, capped at the reading measure. The `lede` slot overrides it when the sentence needs markup.

tint"neutral" | "accent" | "green""neutral"

The band's ground. `neutral` is the page tint and is what every page here uses; `accent` and `green` are for a document whose subject already has a hue.

size"document" | "compact" | "admin""document"

`document` opens a page someone reads: the display line with air around it. `compact` is for a work surface — a graph, a canvas, a table that wants the viewport. It keeps everything that orients (breadcrumb, eyebrow, title, actions), drops to the h2 step, tightens the padding and hides the lede, because a standfirst set at caption size is noise rather than a smaller standfirst. `admin` is the console bar — see below.

Slots

breadcrumb

Above the eyebrow, inside the words column.

actions

On the title line, right-aligned. One primary at most, as everywhere.

lede

The standfirst, when it needs markup. Overrides the `lede` prop.

status

A chip beside the title — the state of the thing the page is about. Outside the `h1` on purpose, so it is not read out as part of the page's name.

art

The piece standing on the band, right of the title. Rendered `aria-hidden`, and hidden entirely below 599px.

There is no default slot and no events: the band is the top of a document, not a control.

Usage Guidelines

Use a page header at the top of a DOCUMENT — docs, news, marketing, a console content page. Every page on this site opens with one.
Use a navbar instead for persistent chrome the page scrolls under. Products get bars; documents get headers.
Give it one title and one standfirst. A page that seems to need two display lines is two pages.
Bind --gd-page-header-column and --gd-page-header-gutter from any layout that centres a body column, so the title starts where the paragraphs do.
Leave tint alone unless the document's subject already owns a hue — green for an approvals page, accent for a product one.
Reach for art only with the cadastral language: the mark, a plaque row, a drawn figure. It is the one place on a page decoration may exist.
Put at most one primary in actions. Two primaries on a screen means neither is.

Behavior & Anatomy

The band is the region, the words are on the grid

The title is the display step — the one 40px line a surface gets; if a page seems to need two display lines, it is two pages. The standfirst caps at the reading measure, the title steps down to the h1 size below the compact breakpoint, and the band's tint plus its hairline are what separate the opening from the body — generous padding gives it the air a document's cover deserves.

Decoration lives here and nowhere else

The band is the one place on a page where decoration is allowed to exist — and it still never moves. The introduction page is the worked example: the mark and the glyph plaques, static, beside the title. GRIDD has no photography and no illustration library; its art language is the cadastral one.

Header or bar

This is deliberately not GdNavbar, and the split is the point. A bar is persistent chrome a page scrolls under; a header is the top of the document itself. Products get bars; documents — docs, news, marketing, a console content page — get headers. The two sharing a component is how a docs title ends up 17px.