Ready
Variant 01
↓
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
Essentials
The centralised text-led Letterbox banner: date, title, subtitle, location, description and a call-to-action, over the letterbox media.
01
Details
Container · 12C (Letterbox, fixed height — content centralised)
TierVariant
FamilyEvents
BucketBanners
GroupLetterbox (12C · fixed height)
VariantEssentials
Canonical nameEvents / Banners / Letterbox / Essentials
IDevent-banner-letterbox-essentials
02
Component Anatomy
| # | Layer | Colour | Data | Notes |
|---|---|---|---|---|
| 1 | Media (Letterbox) | Media | Media | The letterbox media defines the background container the block sits on; a scrim overlay keeps content legible. |
| 2 | Trailing menu | Icon | — | The overflow (…) menu, top-right. |
| 3 | Date & Time | Text 1 | Date · Time | The date/time line, led by an inline attendance-mode icon (In Person). |
| 4 | Event Title | Text 1 | Title | The event title — the centralised focal line. |
| 5 | Event Subtitle | Text 1 | Subtitle (optional) | Supporting line beneath the title. |
| 6 | Location | Text 1 | Location (optional) | The venue / location line. |
| 7 | Listing Description | Text 1 | Description (optional) | The descriptive blurb. |
| 8 | Call to action | Accent | — | Secondary button (Find Out More) + arrow icon; interactive, so it wears Accent. |
| 9 | Sponsor | — | Sponsor (optional) | The sponsor lockup, bottom-right. |
Notes
- Content is centralised in the container over the letterbox media — the banner distinction from a full-width FW Card, whose media is a discrete side-by-side element.
- Optional slots (subtitle, location, description, sponsor) are visibility settings, not separate variants.
03
Spacing
Notes
- Fixed height, anchored to the standard media containers; content block is centralised in the letterbox with a minimum inset from the container edge.
- Detailed positions/gaps to be captured from the master; the fixed-height rhythm is the defining spacing rule.
04
Typography
Notes
- Roles follow the WDS role grid, stepped up for the banner presentation: Title = Headline / lg, Date & Time = Callout / lg, Subtitle = Subhead / base, Location = Meta / base, Description = Body / base, Call to action = Button / base.
- Metrics are owned by the Typography Role Registry; the page mirrors them.
05
Examples
Notes
- Examples coming soon.
Events · Banners · Letterbox · Essentials
The fixed-height Letterbox banner, essentials content centralised over the media. Details mirror the live Sketch master (WDS Design System v3.0).
The fixed-height Letterbox banner, essentials content centralised over the media. Details mirror the live Sketch master (WDS Design System v3.0).