Ready
Variant 03
↓
Download build packReady to build. Markdown spec to prompt and build from.
Sketch docWDS Design System v3.0
Sketch pageComponents > Events > Cards > FW > + DateBlock
+ Date Block
The base card with a Date Block; Speakers optional.
01
Details
Container · 12C (full content width, one event per row)
TierVariant
FamilyEvents
BucketCards
GroupFW (12C)
Variant+ Date Block
Builds onEssentials
SizeLarge (single density)
SpeakersOptional (per-card setting)
Canonical nameEvents / Cards / FW / + Date Block
IDevent-card-fw-date-block
Render to follow
02
Component Anatomy
| # | Slot | Holds | Colour | Presence | Notes |
|---|---|---|---|---|---|
| 1 | Date Block | Date Attendance | Primary Brand Text 1 Icon | Required | The embed at the left of the copy: a Block background container carrying the date (Primary Brand by default, accepts artwork), with an Icon & Label beneath for the attendance mode (Neutral 1 surface, Text 1 icon & text). Date numerals are Text 1. See Date Block. |
| 2 | Top Slot | Time | Text 1 | Required | Time only. The date moves into the Date Block, so this slot drops it (e.g. 09:00 – 13:00 CET). |
| 3 | Trailing Icon | More | Accent | Optional | Top-right affordance. Interactive, so always Accent. See Icons. |
| 4 | Primary | Event Title | Text 1 | Required | The primary line. Source Event Title or Listing Title per card. |
| 5 | Secondary | Event Subtitle | Text 1 | Optional | Venue or subtitle. |
| 6 | Supporting | Location Taxonomy | Text 2 | Optional | Place / category lines. Muted. |
| 7 | Listing Description | Listing Description | Text 1 | Optional | Supporting copy in the content column. |
| 8 | Speaker Strip | Avatars | Surface Text 1 | Optional | The Speakers setting (the preview toggle): up to five 40px avatars at an 8px gap plus a +N overflow counter, in Circle or Square. Inherits the card's surface and Text tokens; no new colour. |
| 9 | Button | Call to Action | Accent | Optional | CTA label (e.g. "FIND OUT MORE"). See Buttons. |
| 10 | Footnote | Footnote | Text 2 | Optional | Foot-anchored fine print. Muted. |
| 11 | Card Background | White / Black | Card fill: White (LM) / Black (DM). Bottom layer. |
Notes
- + Date Block is the date-presentation build of FW Essentials: the date and attendance move out of the Top Slot and into the Date Block, with full Essentials support, same data and slot rules.
- Speakers is a per-card setting (the preview toggle), not a separate variant. The strip sits within the content column and composes with the Date Block.
- Visibility of the optional slots is a per-card setting. Absent slots close up.
03
Spacing
Notes
- Copy-column spacing is standard as per Essentials.
- The Date Block is a fixed-width tile in the left column; its height tracks the card.
- When present, the speaker strip adds a gap above and below itself within the content column.
04
Typography
Notes
- Copy typography is standard as per Essentials (this variant is a single Large density).
- The Date Block's own type (date numerals, month, attendance label) is defined on the Date Block element.
05
Examples
Notes
- Examples coming soon.
Events · Cards · FW · + Date Block
The full-width date-presentation build: date and attendance move into the Date Block, with an optional Speakers strip. Details mirror the live Sketch master (WDS Design System v3.0).
The full-width date-presentation build: date and attendance move into the Date Block, with an optional Speakers strip. Details mirror the live Sketch master (WDS Design System v3.0).