Ready Variant 02

+ Media

The base card with 1x Media Container.

Bucket: CardsGroup: 5050Variant: + MediaModes: 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
01

Details

Container · 6C (two-up, media-led group)
TierVariant
FamilyEvents
BucketCards
Group5050 (6C)
Variant+ Media (was Out The Box)
Builds onEssentials
Canonical nameEvents / Cards / 5050 / + Media
IDevent-card-5050-media
Preview · media container
Skyscraper card, example 1 Skyscraper 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
  • Every container is a fixed frame with a fixed aspect ratio; artwork is pre-set to each frame (Brand Pack > Artwork).
  • Side by side. Skyscraper (1:4), Vertical Media (9:16), Square (1:1) sit beside the copy. They only suit short cards: a few slots, smaller type. The copy column must stay within the media height.
  • Stacked. Ribbon (4:1), Letterbox (3:1), Standard Media (16:9) sit on top of the copy and carry more content; a shallow one (Ribbon) holds the most, a deep one (Standard) the least.
  • The container is a setting from the fixed set, not a separate variant. The abbreviated name is the container's ID token, encoded in the card id (for example …-media-stan).
  • Each container preview shows its example cards at true size, centred in a fixed-height panel so the toggle compares like for like.
  • Anatomy and the type ramp are unchanged from Essentials; the media container sits alongside the copy, it doesn't change the slots or roles.
03

Spacing

Notes
04

Typography

Notes
05

Examples

See + Media across every example card, by container. View examples →

Events · Cards · 5050 · + Media
The media-led 5050 card (was Out The Box): Essentials with a media container beside the copy. Every container shown true-size in both modes; details mirror the live Sketch master (WDS Design System v3.0).