WIP
Variant · Headers
↓
Download build packReady to build. Markdown spec to prompt and build from.
Sketch docWDS Design System v4.0
Sketch pageHeader
Event Header
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.
01
Details
Container · Full-width (1920 × 480 · event content left, partner right)
TierComponent
FamilyEvents
BucketHeaders
GroupEvent Header (full-width · 480px)
VariantBase
Canonical nameEvents / Headers / Event Header
IDevent-header
02
Component Anatomy
| # | Layer | Colour | Data | Notes |
|---|---|---|---|---|
| 1 | Background Container | Primary 100 / 900 | — | The full-width band surface, 480px tall. Brand-tinted: Primary 100 (#e0f2fe) in Light, Primary 900 (#0c4a6e) in Dark. |
| 2 | Attendance mode | Text 1 | In Person / Online | The uppercase attendance eyebrow above the date. |
| 3 | Date & Time | Text 1 | Date · time · timezone | The full date, time range and timezone. |
| 4 | Title | Text 1 | Event title | The event name, flush left; may run to two lines. |
| 5 | Subtitle | Text 1 | Programme / series | The supporting line beneath the title. May take a Text 2 muted override per use. |
| 6 | Location | Text 1 | Venue / address | The venue line. May take a Text 2 muted override per use. |
| 7 | Register (CTA) | Accent | Register action | The primary action, so it wears Accent (Rose), the one interactive control. Uses the Primary Button element. |
| 8 | Partner lockup | Text 1 | Partner logo | Optional. "In partnership with" label above a Sponsor container (logo). Right-aligned, vertically centred. |
Notes
- Event content, not chrome. The Event Header carries event data. It is a sibling of Banners and Heros in the Events family, not page chrome. The generic page frame is the Page Header in Chrome.
- Register is the only Accent. Every other element is neutral over the brand surface; Rose appears solely on the Register action.
- Partner lockup is optional. Present when the event has a partner; the surface is unchanged when absent.
03
Spacing
| Element | Position | Size |
|---|---|---|
| Band | Full-width, page top | 1920 × 480 |
| Content block | Left, x 272, vertically centred | w ~760 |
| Register (CTA) | Below the location line | 116 × 40 |
| Partner lockup | Right, vertically centred | 320 × 180 (container) |
Notes
- Full-bleed by design. The band spans the full 1920, not inset to the 1376 content grid. Event content sits at the left margin; the partner lockup anchors right.
- Measurements read from the live Sketch source; treat as guidance until the header spacing is finalised in v4.0.
04
Typography
| 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 |
Notes
- Roles not yet bound. The header text is being designed in v4.0 and is not yet bound to the Typography Role Registry; the roles above are the nearest match, to confirm on binding. The Title mapping (Headline / lg 32) mirrors the Banner.
05
Examples
Notes
- Variants in design. Three sit alongside the base in Sketch, awaiting write-up: Standard Media (a media container in place of the partner lockup), Ribbon Right, and No App Bar (the taller 560px header used when it leads the page).
Events · Headers · Event Header
The event page-leading header. Register is the one interactive Accent. Details mirror the live Sketch source (WDS Design System v4.0).
The event page-leading header. Register is the one interactive Accent. Details mirror the live Sketch source (WDS Design System v4.0).