# Event Header — Build Pack

**Canonical:** Events / Headers / Event Header · **ID** `event-header`
**Source:** Sketch `WDS Design System v4.0` › page `Header` (symbols `Event Header/LM`, `Event Header/DM`)
**Modes:** Light + Dark · **Status:** WIP

The full-width event page header: attendance mode, date and time, title, subtitle, location and a Register call-to-action at the left, with an optional partner lockup at the right, on a brand-tinted band. Event content furniture, a sibling of Banners and Heros in the Events family, distinct from the generic Page Header in Chrome.

## Structure

Full-width band, 480px tall, page top. Two zones:

- **Left:** event content block (attendance mode, date & time, title, subtitle, location, then the Register button), vertically centred.
- **Right:** an optional partner lockup ("In partnership with" label above a Sponsor container), vertically centred.

## Tokens (bind, never hardcode)

| Element | Light | Dark |
|---|---|---|
| Band surface | `primary_100` | `primary_900` |
| Attendance mode | `text_light_text_1_lm` | `text_dark_text_1_dm` |
| Date & Time | `text_light_text_1_lm` | `text_dark_text_1_dm` |
| Title | `text_light_text_1_lm` | `text_dark_text_1_dm` |
| Subtitle | `text_light_text_1_lm` | `text_dark_text_1_dm` |
| Location | `text_light_text_1_lm` | `text_dark_text_1_dm` |
| Register (interactive) | `base_colours_accent` | `base_colours_accent` |

The band is brand-tinted (Primary scale). Accent (Rose) appears only on the Register action. Subtitle and Location may take a Text 2 muted override per use.

## Type roles

Roles are being designed in v4.0 and are **not yet bound** to the Typography Role Registry. Nearest matches:

| Slot | Nearest role | Metrics |
|---|---|---|
| Attendance mode | Meta (eyebrow) | Inter 13 / SemiBold · uppercase |
| Date & Time | Callout (base) | Inter 15 / SemiBold |
| Title | Headline (lg) | Poppins 32 / Bold |
| Subtitle | Subhead (base) | Inter 16 / SemiBold |
| Location | Meta (base) | Inter 12 / Medium |

Title mapping (Headline / lg 32) mirrors the Banner. Confirm the role bindings when the header is folded into the master.

## Spacing

| Element | Position | Size |
|---|---|---|
| Band | Full-width, page top | 1920 × 480 |
| Content block | Left, x 272, centred | w ~760 |
| Register (CTA) | Below the location line | 116 × 40 |
| Partner lockup | Right, centred | 320 × 180 (container) |

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

## Variants

- **Standard Media:** a media container in place of the partner lockup.
- **Ribbon Right:** a ribbon media treatment at the right.
- **No App Bar:** the taller 560px header used when the header leads the page (no App Bar above it).

The base (partner lockup) is documented here; the three above are designed in Sketch and await write-up.

## States

- Register is the only Accent element in the resting header.
- The partner lockup is optional — omitted when the event has no partner.