# Page Headers · 5050 — Build Pack

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

The split page header: a Basic content core (kicker, title, subtitle) sits **beside** media in the right half, with an optional foreground content container. Frames a hub content or section page. Distinct from the App Bar (Chrome) and the Event Header (Events).

## Structure

Full-width band, 480px tall, page top, on a brand-tinted surface. Two halves:

- **Left half:** the Basic content (kicker, title, subtitle).
- **Right half:** background media, plus an optional content container.

**Media shape** (right half): **Standard (SM)** fills the half; **Letterbox (LB)** is a 16:9 media in the half, right-aligned and vertically positionable (top / centre / bottom). Image or video.

**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: shift the content block **down 40px** (half the App Bar height), i.e. centre it within the band's lower 400px.

## Content container (the slot)

A **slot that takes a fill**, in the media half (512 × 288, 16:9):

- **Video Player:** the first fill (play mark in Accent).
- Extensible: quick-registration short form, interactive map, and other objects. Adding a fill is a setting, not a new variant.

## Tokens (bind, never hardcode)

| Element | Light | Dark |
|---|---|---|
| Band surface | `primary_100` | `primary_900` |
| Background media | artwork (mode-agnostic) | artwork (mode-agnostic) |
| 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` |
| Slot control (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 interactive control of the slot fill.

## Type roles

Bound to the WDS type role grid (LM/DM pairs); metrics 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 |

## Spacing

| Element | Position | Size |
|---|---|---|
| Band | Full-width, page top | 1920 × 480 |
| Content block | Left half, x 272, centred below the App Bar (+40) | w ~760 |
| Standard media | Right half, x 960, full height | 960 × 480 |
| Letterbox media | Right half, right-aligned, positionable | ~16:9 |
| Content container | In the media half, y 96 | 512 × 288 (16:9) |

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