Ready
Component · Chrome
↓
Download build packReady to build. Markdown spec to prompt and build from.
Sketch docWDS Design System v4.0
Sketch pagePage Header
Page Header
01
Details
Container · Full-width (1920 × 480 · content left, media container right or full-bleed)
TierComponent
FamilyChrome
BucketHeader
GroupPage Header (full-width · 480px)
Variant axisMedia container (× optional Video)
Canonical nameChrome / Header / Page Header
IDpage-header
02
Component Anatomy
| # | Layer | Colour | Data | Notes |
|---|---|---|---|---|
| 1 | Background Container | Primary 100 / 900 | — | The full-width band, 480px tall. Brand-tinted: Primary 100 (#e0f2fe) in Light, Primary 900 (#0c4a6e) in Dark. In the Letterbox cover container the media fills this band and the content sits over it. |
| 2 | Eyebrow | Text 2 | Section kicker | The muted label above the title. Uppercase, Text 2 in both modes. |
| 3 | Title | Text 1 | Page title | The page heading, flush left. Non-interactive; Text 1. |
| 4 | Subtitle | Text 1 | Supporting line | One or two supporting lines beneath the title. |
| 5 | Media Container | Media | Image / gradient | The container axis: Letterbox cover, Standard 5050, or Letterbox 5050 (see below). Mode-agnostic artwork. |
| 6 | Video Player | Accent | Optional video | Optional. A 16:9 player placed in the media zone; the play mark is the one interactive control, so it wears Accent (Rose). |
Media containers
- Letterbox cover. The media covers the entire band, edge to edge; the content sits over it. Use for a strong visual lead.
- Standard 5050. A standard media container fills the right half (50%), full height, with the content on the left half.
- Letterbox 5050. A letterbox (16:9) media sits in the right half, right-aligned and vertically positioned (top / centre / bottom), covering roughly a quarter of the band.
- + Video. Any container can carry a Video Player in its media zone. The play mark is the only Accent in the resting header.
Notes
- Page furniture, not event content. The Page Header frames a hub content or section page. It is distinct from the Event Header, which carries event data and lives in the Events family.
- Brand-tinted surface. The content side uses Primary tints (100 / 900), so it reads as brand structure in both modes rather than a neutral Surface grey.
- Rose is interaction-only. The sole Accent in the resting header is the video play mark; the header carries no other interactive colour.
03
Spacing
| Element | Position | Size |
|---|---|---|
| Band | Full-width, page top | 1920 × 480 |
| Content block | Left, x 272, vertically centred below the App Bar (offset +40) | w ~760 |
| Eyebrow → Title | Gap above the title | ~10 |
| Title → Subtitle | Gap below the title | ~16 |
| Standard 5050 media | Right half, full height | 960 × 480 |
| Video Player | Centred in the media zone | 512 × 288 (16:9) |
Notes
- App Bar offset. On the page the App Bar (80px) sits on top of the band, so the content block is centred in the area below it (the band's lower 400px), offset down 40px from the full-band centre.
- Full-bleed by design. The band spans the full 1920, not inset to the 1376 content grid the page body uses. The content block sits at the left margin; the media anchors right (or fills the band in cover).
- Measurements read from the live Sketch source; treat as guidance until the header spacing is finalised in v4.0.
04
Typography
| Slot | Role | Metrics |
|---|---|---|
| Eyebrow | Callout / base | Inter 14 / SemiBold · uppercase |
| Title | Display / base | Poppins 52 / Bold |
| Subtitle | Subhead / base | Inter 16 / Medium |
Notes
- 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; the page mirrors them.
- Eyebrow takes the Callout role with a Text 2 colour override for the muting, not a separate style.
- In the Letterbox cover container the content sits over the media, so confirm text contrast against the artwork per use.
05
Examples
Notes
- The preview above toggles the full set: three media containers (Letterbox cover · Standard 5050 · Letterbox 5050), each static or with a Video Player, in Light and Dark.
Chrome · Header · Page Header
The full-width page header, brand-tinted, framing any hub content page. The media play mark is the one interactive Accent. Details mirror the live Sketch source (WDS Design System v4.0).
The full-width page header, brand-tinted, framing any hub content page. The media play mark is the one interactive Accent. Details mirror the live Sketch source (WDS Design System v4.0).