Ready Variant 02

Essentials + Speakers

The base card with a Speaker Strip.

Bucket: CardsGroup: FWVariant: Essentials + SpeakersModes: LM + DM
Download build packReady to build. Markdown spec to prompt and build from. Generated 30 Jun 2026WDS v3.0 Sketch docWDS Design System v3.0 Sketch pageREADY: Components > Events > Cards > FW > Essentials + Media + Speakers
01

Details

Container · 12C (full content width, one event per row)
TierVariant
FamilyEvents
BucketCards
GroupFW (12C)
VariantEssentials + Speakers
Builds onEssentials
Canonical nameEvents / Cards / FW / Essentials + Speakers
IDevent-card-fw-speakers
Preview · media container
Full Width Essentials + Speakers card, text only
02

Component Anatomy

Notes
  • The speaker strip sits inside the content column: up to five avatars at an 8px gap, plus a +N overflow counter. Avatar shape (Circle / Square) is a per-card setting; shown here in Square.
  • The strip introduces no new colour; avatar frame and counter inherit the card's surface and Text tokens. It composes with any media container.
  • Media panel (optional). The side-mounted panel supports Skyscraper (1:4), Vertical Media (9:16), Square (1:1) and Standard Media (16:9). No container leaves the card text-and-speakers across the rail.
  • The slot model, roles and content schema are inherited from Essentials; the strip and the media panel are the only additions.
  • Every container is shown true-size in both modes; the preview stage is fixed-height so the toggle compares like for like.
03

Spacing

Notes
  • Base slot spacing is standard as per Essentials.
  • The speaker strip adds a gap above and below itself within the content column.
04

Typography

Notes
  • Typography is standard as per Essentials; the speaker strip adds no text slots.
05

Examples

Notes
  • Examples coming soon.
Events · Cards · FW · Essentials + Speakers
The full-width base plus a Speakers strip, with an optional side media panel. Details mirror the live Sketch master (WDS Design System v3.0).