Ready
Variant · Page Headers
↓
Download build packReady to build. Markdown spec to prompt and build from.
Sketch docWDS Design System v4.0
Sketch pagePage Header
5050
Content beside media in a split.
01
Details
Layout · 5050 (content beside media in the right half · 1920 × 480)
TierComponent
FamilyPage Headers
Variant5050 (content beside media)
Media shapeStandard (SM) · Letterbox (LB)
Content container1 slot (fill: Video Player, extensible)
Canonical namePage Headers / 5050
IDpage-headers-5050
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. |
| 2 | Background media | Media | Image / video | In the right half. Shape is Standard (fills the half) or Letterbox (16:9 in the half, positionable). Mode-agnostic artwork. |
| 3 | Eyebrow | Text 2 | Section kicker | The muted label above the title. Uppercase, Text 2 in both modes. |
| 4 | Title | Text 1 | Page title | The page heading, flush left in the left half. |
| 5 | Subtitle | Text 1 | Supporting line | One or two supporting lines beneath the title. |
| 6 | Content container | Accent | Slotted object | An optional foreground slot in the media half. Fill = a Video Player today (play mark in Accent); a registration form, interactive map or other object can occupy the same slot. |
Notes
- Content beside media. The left half carries the Basic content core; the right half carries the background media (Standard or Letterbox shape) and any content container.
- Content container is a slot, not a video. Video Player is the first fill; the slot accepts other objects (quick registration, interactive map) without new variants.
- Rose is interaction-only. The only Accent in the resting header is the interactive control of whatever fills the slot.
03
Spacing
| Element | Position | Size |
|---|---|---|
| Band | Full-width, page top | 1920 × 480 |
| Content block | Left half, x 272, vertically centred below the App Bar (offset +40) | w ~760 |
| Standard media | Right half, x 960, full height | 960 × 480 |
| Letterbox media | Right half, right-aligned, vertically positionable | ~16:9 |
| Content container | In the media half, y 96 | 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.
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.
05
Examples
Notes
- The preview toggles media shape (Standard / Letterbox) and the content container (None / Video Player), in Light and Dark. Further slot fills (registration, map) will be added as they are designed.
Page Headers · 5050
The split layout: the Basic content sits beside media in the right half (Standard Media or Letterbox shape), with an optional foreground content container. Details mirror the live Sketch source (WDS Design System v4.0).
The split layout: the Basic content sits beside media in the right half (Standard Media or Letterbox shape), with an optional foreground content container. Details mirror the live Sketch source (WDS Design System v4.0).