# Page Headers · Cover — Build Pack

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

The full-bleed page header: a Basic content core (kicker, title, subtitle) sits **over** a cover-filling background media, 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. Three layers:

- **Background media:** fills the whole 1920 × 480 band, edge to edge. Image or video.
- **Basic content:** kicker, title, subtitle, at the left, over the media.
- **Content container:** an optional foreground slot in the media zone (see 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: shift the content block **down 40px** (half the App Bar height), i.e. centre it within the band's lower 400px. The media and container are unaffected.

## Content container (the slot)

The foreground container is a **slot that takes a fill**, not a fixed video element. The header owns the slot geometry (512 × 288, 16:9, in the media zone); the fill is a separate object:

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

## Tokens (bind, never hardcode)

| Element | Light | Dark |
|---|---|---|
| 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` |

Accent (Rose) appears only on the interactive control of the slot fill (e.g. the video play mark). Because the content sits over the media, confirm text contrast against the artwork per use.

## 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 |

## Spacing

| Element | Position | Size |
|---|---|---|
| Band | Full-width, page top | 1920 × 480 |
| Background media | Fills the band | 1920 × 480 |
| Content block | Left, x 272, centred below the App Bar (+40) | w ~760 |
| Content container | 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.