Ready
Variant 02
↓
Download build packReady to build. Markdown spec to prompt and build from.
Sketch docWDS Design System v3.0
Sketch pageWIP: Components > Events > Banners > Letterbox > + DateBlock
+ Date Block
The Letterbox banner with the Date Block: date and attendance move into the tile, with a Speaker Strip.
01
Details
Container · 12C (Letterbox, fixed height — Date Block tile + Speaker Strip)
TierVariant
FamilyEvents
BucketBanners
GroupLetterbox (12C · fixed height)
Variant+ Date Block
Builds onEssentials
Canonical nameEvents / Banners / Letterbox / + Date Block
IDevent-banner-letterbox-dateblock
02
Component Anatomy
| # | Layer | Colour | Data | Notes |
|---|---|---|---|---|
| 1 | Date Block tile | Primary Brand | Date | Left tile carrying the day numeral over the month; Sky (Primary Brand) fill, mode-agnostic. Day = Display / lg, Month = Headline / sm. |
| 2 | Attendance chip | Surface | Attendance mode | The IN PERSON chip beneath the tile; label = Label / Section, with the attendance icon. |
| 3 | Speaker Strip | Text 1 | Speakers (optional) | A row of speaker avatars closed by a +N counter, beneath the description. |
Notes
- The banner slot model, media rule and content schema are inherited from Essentials; this variant adds the Date Block presentation. Date and attendance move into the tile — the date/time line above is retained.
- The current artboard also carries a Speaker Strip; flagged for confirmation (whether it belongs to + Date Block or a separate + Speakers variant).
- The Date Block reuses the shared Date Block element — the same tile as the Cards groups.
03
Spacing
Notes
- Spacing is standard as per Essentials; the Date Block tile occupies the left inset, the content column centralised beside it.
04
Typography
Notes
- Type is standard as per Essentials, plus the Date Block roles: Day = Display / lg, Month = Headline / sm, Attendance = Label / Section.
- Metrics are owned by the Typography Role Registry; the page mirrors them.
05
Examples
Notes
- Examples coming soon.
Events · Banners · Letterbox · + Date Block
The Letterbox date-presentation build: date and attendance in the Date Block tile, plus a Speaker Strip. Details mirror the live Sketch master (WDS Design System v3.0).
The Letterbox date-presentation build: date and attendance in the Date Block tile, plus a Speaker Strip. Details mirror the live Sketch master (WDS Design System v3.0).