Ready Variant 03

+ Media + Speakers

The base card with media and a Speaker Strip.

Bucket: CardsGroup: ForeseeableVariant: + Media + Speakers

↓ Download build packReady to build. Markdown spec to prompt and build from. Generated 17 Jun 2026WDS v3.0 Sketch docWDS Design System v3.0 Sketch pageComponents > Events > Cards > Foreseeable > + Media + Speakers

Details

Container · 4C (with speaker strip)

TierVariant

FamilyEvents

BucketCards

GroupForeseeable (4C)

Variant+ Media + Speakers

Builds onEssentials

Canonical nameEvents / Cards / Foreseeable / + Media + Speakers

IDevent-card-4c-essentials-media-speakers

Component Anatomy

Media containers

Skyscraper

Sky|1:4

Best for: short, wide cards (eyebrow and title).

Ribbon

Rib|4:1

Best for: more content.

Letterbox

Let|3:1

Best for: moderate content.

Standard Media

Stan|16:9

Best for: lighter content.

Supported on 4C

Vertical Media

Vm|9:16

Needs a wider card.

Square

Sq|1:1

Needs a wider card.

Not on 4C (needs a wider card)

Notes

Media containers match + Media: Skyscraper, Ribbon, Letterbox and Standard Media are supported on 4C; Vertical Media and Square need a wider card.
The speaker strip composes with any container. With the strip beneath the copy the card runs taller, so side-by-side Skyscraper suits only the shortest cards; the stacked containers absorb the extra height more comfortably.
Only media-stan supports Sponsor overlays (a tagline and up to two logos).

Spacing

Speaker strip	Above	Below
Small	16 md	16 md
Medium	16 md	16 md
Large	24 xl	16 md

Notes

The speaker strip sits beneath the content stack. Above is the gap from the copy; below is the gap to the card's bottom edge.
Only Large opens up above (xl 24); Small and Medium use md 16. Below is md 16 in every size.
The strip holds up to five 40px avatars at an 8px gap, plus a +N overflow counter; avatar shape (Circle / Square) is a setting. All other spacing inherits the Essentials slot model. Scale: xs 8 · sm 12 · md 16 · lg 20 · xl 24.

Typography

Notes

Typography is standard as per Essentials.

Examples

Notes

Examples coming soon.

Events · Cards · Foreseeable · + Media + Speakers
The Essentials base plus the Speakers strip. Details and data are read from the live Sketch master (WDS Design System v3.0). Re-export the renders when the component changes.