Ready Variant 03

+ Media + Speakers

The base card with media and a Speaker Strip.

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

Details

Container · 6C (two-up, media-led group)
TierVariant
FamilyEvents
BucketCards
Group5050 (6C)
Variant+ Media + Speakers
Builds on+ Media
Canonical nameEvents / Cards / 5050 / + Media + Speakers
IDevent-card-5050-media-speakers
Preview · media container
Skyscraper + Speakers card, example 1 Skyscraper + Speakers card, example 2
02

Component Anatomy

Media containers

Skyscraper
Sky|1:4
Best for: very short, wide cards (eyebrow + title).
Vertical Media
VM|9:16
Best for: short cards, few slots.
Square
Sq|1:1
Best for: short cards; needs Title_Short at larger sizes.
Side by side (short cards only)
Ribbon
Rib|4:1
Best for: more content.
Letterbox
Let|3:1
Best for: moderate content.
Standard Media
SM|16:9
Best for: lighter content.
Stacked
Notes
  • The speaker strip sits beneath the content stack: up to five 40px avatars at an 8px gap, plus a +N overflow counter in the sixth slot. Avatar shape (Circle / Square) is a per-card setting; shown here in Circle.
  • The strip introduces no new colour; avatar frame and counter inherit the card's surface and Text tokens. It composes with any media container.
  • Side by side. Skyscraper, Vertical Media, Square sit beside the copy and only suit short cards; the strip tightens that further. Stacked. Ribbon, Letterbox, Standard Media sit on top and carry more content.
  • Media-container detail lives on + Media; the slot model and type ramp are unchanged from Essentials.
  • Each container preview shows its example cards at true size, centred in a fixed-height panel so the toggle compares like for like.
03

Spacing

Notes
04

Typography

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

Examples

Notes
  • Examples coming soon.
Events · Cards · 5050 · + Media + Speakers
+ Media plus the Speakers strip beneath the copy. Every media container shown true-size in both modes; details mirror the live Sketch master (WDS Design System v3.0).