# Essentials (5050) — Build Pack

Component build specification for the dev team. Paste this into your build prompt, or work from it directly. It is token-led: build against the semantic tokens, not raw hex values. Resolve token values from the Colour registry and type metrics from the Typography registry.

| | |
|---|---|
| Component | Events / Cards / 5050 / Essentials |
| ID | `event-card-5050-essentials` |
| Container | 6C (two-up) |
| Status | Ready for build |
| Sketch doc | WDS Design System v3.0 |
| Sketch page | READY: Components > Events > Cards > 5050 > Essentials |
| Registries | Colour + Typography (token and type values) |
| Version | WDS v3.0 |
| Generated | 2026-06-16 |

5050 Essentials is the text-led base card of the 5050 (6C) group. It behaves **exactly the same way as the 4C Foreseeable Essentials card** — same slot model, spacing and type ramp — at the 6C two-up footprint. Build it from the 4C Essentials base; the only differences are the container span and the slot max-widths (see Measure below). Every other 5050 variant (+ Date Block, + Media, + Letterbox, + Speakers) layers on top of this base.

## Sizing

Small, Medium and Large are **densities of one component**, driven by the type ramp. They are not variants. Target density with a `data-size` attribute on the card root:

```
data-size="sm" | data-size="md" | data-size="lg"
```

Both Light Mode and Dark Mode are required.

## Slots

Slots stack top to bottom in a fixed order. Each slot maps to a datapoint; the Eyebrow carries three. Visibility is a per-card setting, not a variant. Absent slots close up.

| # | Slot | Holds | Colour token | Presence |
|---|------|-------|--------------|----------|
| 1 | Eyebrow | Primary Icon, Date & Time, Trailing Icon | Icon, Text 1, Accent | Required |
| 2 | Primary | Event Title | Text 1 | Required |
| 3 | Secondary | Event Subtitle | Text 1 | Optional |
| 4 | Supporting I | Location | Text 2 | Optional |
| 5 | Supporting II | Taxonomy | Text 2 | Optional |
| 6 | Listing Description | Listing Description | Text 1 | Optional |
| 7 | Button | Call to Action | Accent | Optional |
| 8 | Footnote | Footnote | Text 2 | Optional |
| — | Card Background | — | Surface White (LM) / Black (DM) | Always |

Eyebrow detail: the attendance-mode icon (In Person / Online / Hybrid) is informational, so it takes the Icon token, not Accent. The trailing icon is a setting (a More menu on Medium and Large, or a forward Arrow on Small) and is always Accent, since it is the card's interactive affordance (reuses `base_colours_accent`).

## Spacing

Spacing scale: `xs` 8, `sm` 12, `md` 16, `lg` 20, `xl` 24.

| 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) |

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

## Typography

Role per slot, with the metric at each density (font, weight, size / line-height).

| Slot | Datapoint | Role | Small | Medium | Large |
|------|-----------|------|-------|--------|-------|
| Eyebrow | Date & Time | Callout | Inter 500 · 14 / 20 | Inter 500 · 15 / 22 | Inter 500 · 15 / 22 |
| Primary | Title | Headline (Title at Small) | Poppins 600 · 16 / 24 | Poppins 600 · 20 / 28 | Poppins 600 · 24 / 32 |
| Secondary | Subtitle | Subhead | Inter 500 · 13 / 18 | Inter 500 · 14 / 20 | Inter 500 · 16 / 24 |
| Supporting | Location / Taxonomy | Utility | Inter 500 · 12 / 16 | Inter 500 · 12 / 16 | Inter 500 · 12 / 16 |
| Listing Description | Listing Description | Body | Inter 400 · 13 / 20 | Inter 400 · 15 / 22 | Inter 400 · 15 / 22 |
| Button | Call to Action | Button | Inter 600 · 14 / 20 | Inter 600 · 14 / 20 | Inter 600 · 14 / 20 |
| Footnote | Footnote | Meta | Inter 400 · 12 / 16 | Inter 400 · 12 / 16 | Inter 400 · 12 / 16 |

## Measure

On the 6C two-up footprint the text slots carry an intentional maximum width, to hold a comfortable measure across the wider card. The default is 420px; Title and Subtitle are the two wider exceptions. These widths are the one layout difference from the 4C Foreseeable Essentials card.

| Slot | Max width |
|------|-----------|
| Primary (Title) | 460px |
| Secondary (Subtitle) | 440px |
| All other text slots (Date & Time, Supporting, Listing Description, Button, Footnote) | 420px |

## Colour tokens

Build against the semantic tokens. Values resolve per mode from the Colour registry.

- Text 1: primary text (titles, body, date & time, listing description).
- Text 2: muted text (location, taxonomy, footnote).
- Accent: trailing icon and CTA. Interactive only.
- Icon: attendance-mode icon (informational).
- Surface: card background, White (LM) / Black (DM).

## Acceptance criteria

- Slot order is fixed: Eyebrow → Primary → Secondary → Supporting I → Supporting II → Listing Description → Button → Footnote.
- Eyebrow and Primary are always present; all other slots are optional and driven by a per-card setting.
- Absent slots close up; present slots keep their declared gaps.
- The trailing icon is always Accent; the attendance icon takes the Icon token (informational, not interactive).
- `data-size` on the card root drives density; the type ramp and the terminal bottom-edge padding are the only things that change between sizes.
- Both Light Mode and Dark Mode render correctly.
- Behaviour matches the 4C Foreseeable Essentials card exactly, bar two layout differences: the 6C two-up container span, and the slot max-widths (Title 460px, Subtitle 440px, all other slots 420px).

## Reference renders

Render paths are relative to this component folder.

- Preview cards (data states at each size, both modes): `cards/ee-{sm,md,lg}-<n>-{lm,dm}.png`
- No separate examples are published for 5050 Essentials. The data-state behaviour is identical to the 4C Foreseeable Essentials card — see its Examples page for the full interactive permutation grid.