# Page Header — Build Pack

**Canonical:** Chrome / Header / Page Header · **ID** `page-header`
**Source:** Sketch `WDS Design System v4.0` › page `Page Header`
**Modes:** Light + Dark · **Status:** Ready

The full-width page header: a kicker, title and subtitle over a brand-tinted band, with a media container. Frames a hub content or section page. Distinct from the Event Header, which carries event data and lives in the Events family.

## Structure

Full-width band, 480px tall, page top. Content block (eyebrow, title, subtitle) at the left; the media container is set by the container axis below.

**App Bar offset (important).** On the page the App Bar (80px) sits on top of the band. Centre the content in the area *below* the App Bar, not the full band: shift the whole content block **down by 40px** (half the App Bar height). In other words, vertically centre the content within the band's lower 400px (y 80 to 480), which is 40px below the full-band centre. The media zone is unaffected.

## Media container axis

| Container | Coverage | Layout |
|---|---|---|
| Letterbox cover | Full band, edge to edge | Media fills the band; content sits over it |
| Standard 5050 | Right half (50%), full height | Content left half, media right half |
| Letterbox 5050 | ~25% (16:9 in the right half) | Content left; letterbox media right, positioned top / centre / bottom |

Each container can carry an optional **Video Player** (16:9) in its media zone.

## Tokens (bind, never hardcode)

| Element | Light | Dark |
|---|---|---|
| Band surface | `primary_100` | `primary_900` |
| Eyebrow | `text_light_text_2_lm` | `text_dark_text_2_dm` |
| Title | `text_light_text_1_lm` | `text_dark_text_1_dm` |
| Subtitle | `text_light_text_1_lm` | `text_dark_text_1_dm` |
| Play mark (interactive) | `base_colours_accent` | `base_colours_accent` |

The content side is brand-tinted (Primary scale), not a neutral Surface grey. Accent (Rose) appears only on the video play mark. Media artwork is mode-agnostic.

## Type roles

Each slot is bound to a shared text style on the WDS type role grid (an LM/DM pair); metrics are owned by the Typography Role Registry.

| Slot | Role | Metrics |
|---|---|---|
| Eyebrow | `Callout / base` | Inter 14 / SemiBold · uppercase (Text 2 colour override) |
| Title | `Display / base` | Poppins 52 / Bold |
| Subtitle | `Subhead / base` | Inter 16 / Medium |

In the Letterbox cover container the content sits over the media, so confirm text contrast against the artwork per use.

## Spacing

Band 1920 × 480, full-width at the top of the page. The content block sits at the left margin (x 272), vertically centred in the area below the App Bar (see the App Bar offset above); the media zone is set by the container.

| Element | Position | Size |
|---|---|---|
| Band | Full-width, page top | 1920 × 480 |
| Content block | Left, x 272; vertically centred in the band's lower 400px (full-band centre + 40px) | w ~760 |
| Eyebrow | x 272, top of the block | h 20 |
| Title | x 272, 10px below the eyebrow | 760 × 60 |
| Subtitle | x 272, 16px below the title | 440 × 48 |
| Letterbox cover media | Fills the band (artwork bleeds) | 1920 × 480 |
| Standard 5050 media | Right half, x 960, full height | 960 × 480 |
| Letterbox 5050 media | Right half, right-aligned, vertically positionable (top / centre / bottom) | ~16:9 |
| Video Player | In the media zone, y 96 | 512 × 288 (16:9) |

Full-bleed by design. The band is **not** inset to the 1376 content grid the page body uses.

The header sits directly below the **App Bar** (80px, a separate Chrome primitive `Chrome / App Bar`, built from its own pack). The App Bar overlays the top of the band, which is why the content is offset down 40px as above.

## States

- The video play mark is the only Accent element in the resting header.