Variant 03

+ Media

Essentials with the feature image — the former Out The Box default. The media-led 6C card; date presentation is a setting.

Bucket: ListingsGroup: 5050Variant: + MediaModes: LM + DM

Details

Container · 6C (two-up, media-led group)

TierVariant

FamilyEvents

BucketCards

Group5050 (6C)

Variant+ Media (was Out The Box)

Canonical nameEvents / Cards / 5050 / + Media

IDevent-card-5050-media

5050 + Media listing card preview — Medium, Vertical Media container, full data

Component Anatomy

#	Layer	Colour	Data	Notes
1	Media	Image	Feature image	The feature image, cropped to one of the fixed media containers — Skyscraper (1:4), Vertical Media (9:16), Square (1:1), Letterbox (3:1). Sourced from Brand Pack · Artwork. A sponsor logo + tagline can be overlaid on the container — a separate element.
2	In Person	Icon	Attendance mode	Attendance-mode icon, left of the time — swaps In Person / Online / Hybrid. See Icons.
3	Date & Time	Text 1	Date & Time	Start, end & primary timezone.
4	Trailing Icon	Icon	—	Top-right affordance — the More menu. See Icons.
5	Event Title	Text 1	Title / Title_Short	Primary line. With the Square container at larger densities the copy area narrows — the data must use `Event Title_Short`. See the precondition in Examples.
6	Event Secondary Slot	Text 1	Secondary	Below the title — venue or secondary line.
7	Event Supporting Slot	Text 1	Supporting (optional)	Supporting copy. Shown in the full data state.
8	Footnote	Text 1	Footnote (optional)	Closing line — delivery / series credit. Shown in the full data state.
9	Card Background	White / Black	—	Card fill — White (LM) / Black (DM). Bottom layer.

Typography

Same type ramp as Essentials — the media container sits beside the copy, it doesn't change the roles. Click a slot to reveal the role and a live specimen at every density.

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

Event Title · Headline · 600 → 700 at Large

SHeadline / sm
Poppins 600 · 20 / 28

Signal and Scale Engineering Live Content at Speed

MHeadline / base
Poppins 600 · 24 / 32

Signal and Scale Engineering Live Content at Speed

LHeadline / md
Poppins 700 · 28 / 36

Signal and Scale Engineering Live Content at Speed

Event Secondary Slot · Subhead

SSubhead / sm
Inter 500 · 14 / 20

Hotel Amigo, Brussels

MSubhead / base
Inter 500 · 16 / 24

Hotel Amigo, Brussels

LSubhead / base
Inter 500 · 16 / 24

Hotel Amigo, Brussels

Event Supporting Slot · Utility · optional

SUtility / base
Inter 500 · 12 / 16

Supporting text

MUtility / base
Inter 500 · 12 / 16

Supporting text

LUtility / base
Inter 500 · 12 / 16

Supporting text

Footnote · Meta · optional

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

The three media containers across the density ramp, and the compact data state. View examples →

Media containers — Skyscraper, Vertical Media, Square, Letterbox — beside the same Essentials copy. The container is a setting from the fixed set, not a separate variant.
Title_Short precondition — the Square container at the larger title densities narrows the copy area, so the data must supply Event Title_Short rather than the full Event Title. This is an authoring requirement: when an author picks Square at a larger size, the system requests the short field from the copywriter.
Size (S · M · L) is a density of one component via the type ramp. Supporting slot and Footnote are settings-driven optional slots.

Events · Cards · 5050 · + Media
The media-led 5050 card (was Out The Box). Preview is the live render; full anatomy + type ramp follow once the 6C master is structured.