Ready Variant 01

Essentials

The text-led base card.

Bucket: ListingsGroup: ForeseeableVariant: Essentials

↓ Download build packReady to build. Markdown spec to prompt and build from. Generated 15 Jun 2026WDS v3.0 Sketch docWDS Design System v3.0 Sketch pageREADY: Components > Events > Cards > Foreseeable > Essentials

Details

Container · 4C (three-up, compact)

TierVariant

FamilyEvents

BucketCards

GroupForeseeable (4C)

VariantEssentials (base)

SizesSmall · Medium · Large (density)

Size handledata-size="sm · md · lg" (on the card root, the CSS override hook)

Canonical nameEvents / Cards / Foreseeable / Essentials

IDevent-card-4c-essentials

Small Essentials card — Small · Title 16

Medium Essentials card — Medium · Title 20

Large Essentials card — Large · Title 24

Component Anatomy

#	Slot	Holds	Colour	Presence	Notes
1	Eyebrow	Primary Icon Date & Time Trailing Icon	Icon Text 1 Accent	Required	Attendance-mode icon (In Person / Online / Hybrid): informational, so it takes the Icon token, not Accent. Sits with the date & time line. The trailing icon (a More menu on M / L, or a forward Arrow on S) is a setting, and is always Accent: it is the card's interactive affordance, reusing `base_colours_accent`. See Icons.
2	Primary	Event Title	Text 1	Required	The primary line. Source `Event Title` or `Listing Title` per card.
3	Secondary	Event Subtitle	Text 1	Optional	Venue or subtitle.
4	Supporting I	Location	Text 2	Optional	Place / venue line. Muted.
5	Supporting II	Taxonomy	Text 2	Optional	Category / tag line (e.g. a brand or sponsor).
6	Paragraph	Listing Description	Text 1	Optional	Supporting copy; always follows the supporting slots.
7	Button	Call to Action	Accent	Optional	CTA label (e.g. "FIND OUT MORE"). Sits above the footnote. See Buttons.
8	Footnote	Footnote	Text 2	Optional	Foot-anchored fine print. Muted.
9	Card Background		White / Black		Card fill, White (LM) / Black (DM). Bottom layer.

Notes

Slots stack top-down in a fixed order, each mapping to a datapoint (the Eyebrow carries three).
Visibility is a per-card setting, not a separate variant.
The Eyebrow (primary icon · date & time) and Primary (title) slots are always required.
All other slots are optional.
Absent slots close up.

Spacing

Position	Applies to	Above	Below
Top	Eyebrow slot, to the top edge	12 sm	8 xs
Between	Every other slot	8 xs	8 xs
Bottom	Terminal text slot: Title, Subtitle or Listing Description	8 xs	S 16 md · M / L 24 xl
Bottom	Button (CTA block)	20 lg	20 lg
Bottom	Footnote	20 lg	16 md

Notes

Spacing scale: xs 8 · sm 12 · md 16 · lg 20 · xl 24.
Interior gaps are constant across all three sizes. Only the bottom edge under a terminal text slot steps with size, from md 16 at Small to xl 24 at Medium and Large.
The Button and Footnote are each set apart with lg 20 above. The Button closes at lg 20, the Footnote at md 16, in every size.
A slot is terminal when it is the last visible slot before the bottom edge.

Typography

Eyebrow · Date & Time · Callout

SCallout / base
Inter 500 · 14 / 20

10 FEB, 09:00 – 13:00 CET

MCallout / lg
Inter 500 · 15 / 22

10 FEB, 09:00 – 13:00 CET

LCallout / lg
Inter 500 · 15 / 22

10 FEB, 09:00 – 13:00 CET

Primary · Title · Headline → Title at Small

STitle / base
Poppins 600 · 16 / 24

The Live Content Engine

MHeadline / sm
Poppins 600 · 20 / 28

The Live Content Engine

LHeadline / base
Poppins 600 · 24 / 32

The Live Content Engine

Secondary · Subtitle · Subhead

SSubhead / xs
Inter 500 · 13 / 18

Turn events into content ecosystems

MSubhead / sm
Inter 500 · 14 / 20

Turn events into content ecosystems

LSubhead / base
Inter 500 · 16 / 24

Turn events into content ecosystems

Supporting · Location / Taxonomy · Utility

SUtility / base
Inter 500 · 12 / 16

London · Online & in person

MUtility / base
Inter 500 · 12 / 16

London · Online & in person

LUtility / base
Inter 500 · 12 / 16

London · Online & in person

Paragraph · Listing Description · Body

SBody / sm
Inter 400 · 13 / 20

Join Wavecast for a practical strategy session on building better content systems.

MBody / base
Inter 400 · 15 / 22

Join Wavecast for a practical strategy session on building better content systems.

LBody / base
Inter 400 · 15 / 22

Join Wavecast for a practical strategy session on building better content systems.

Button · Call to Action · Button

SButton / base
Inter 600 · 14 / 20

FIND OUT MORE

MButton / base
Inter 600 · 14 / 20

FIND OUT MORE

LButton / base
Inter 600 · 14 / 20

FIND OUT MORE

Footnote · Meta

SMeta / base
Inter 400 · 12 / 16

This event is delivered by Wavecast

MMeta / base
Inter 400 · 12 / 16

This event is delivered by Wavecast

LMeta / base
Inter 400 · 12 / 16

This event is delivered by Wavecast

Examples

See this variant at every size and under different settings. View examples →

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