# + Date Block (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 / + Date Block |
| ID | `event-card-5050-date-block` |
| Container | 6C (two-up) |
| Height | Variable (grows to content) |
| Status | Ready for build |
| Sketch doc | WDS Design System v3.0 |
| Sketch page | READY: Components > Events > Cards > 5050 > +DateBlock Variants |
| Registries | Colour + Typography (token and type values) |
| Version | WDS v3.0 |
| Generated | 30 Jun 2026 |

\+ Date Block is the base card with the Date Block: the Essentials base plus one structural addition, a **Date & Attendance Block** down the left edge that carries the event date and the attendance-mode label. The block is built on a **Block background container**, which takes the Primary Brand colour by default but can accept artwork. This is not a standardised media crop (unlike the + Media containers); it is an image that flexes with the block, particularly on the default flexible-height build. Because the block now carries the date, the date **leaves the time slot**, so the eyebrow shows time only. Everything else (slot model, type ramp, spacing) follows 5050 Essentials. This is the default, variable-height build: the card grows to fit its content. The Fixed Height and Compact builds are configurations of it (see below).

## Layout

Two columns, full card height:

- **Left.** Date & Attendance Block: fixed 136px wide, full height. Built on the **Block background container** (Primary Brand colour by default; can accept flexing artwork, not a standardised media crop). Holds the date (numeral + month) and, at the bottom, the Format Label (attendance-mode icon + label) on its own surface tile.
- **Right.** Content column: the Essentials slot stack: eyebrow (time + trailing affordance), title, and the optional slots below.

## Date & Attendance Block

| Element | Holds | Role | Colour token |
|---------|-------|------|--------------|
| Block background container | Primary Brand colour by default, or artwork | — | Primary Brand (`base_colours_primary`) default |
| Date numeral | Day (e.g. 10) | Display | Text 1 |
| Month | Month (e.g. FEB) | Headline | Text 1 |
| Format Label tile | — | — | Surface (SSL1 LM / SSD1 DM) |
| Attendance icon | In Person / Online / Hybrid | — | Icon (informational) |
| Attendance label | e.g. IN PERSON | Label / Section | Text 1 |

The Block background container is a container, not a fixed media crop: by default it carries the Primary Brand colour, but it can hold artwork that flexes to the block (height varies on the default flexible-height build). Date numerals take Text 1 so they read against the default Primary Brand fill (black in Light Mode, white in Dark Mode); over artwork, ensure adequate contrast. The attendance mode is informational, so its icon takes the Icon token, never Accent.

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

Content-column slots stack top to bottom in a fixed order. The date and attendance datapoints live in the Date Block, not the eyebrow. Visibility is a per-card setting, not a variant. Absent slots close up.

| # | Slot | Holds | Colour token | Presence |
|---|------|-------|--------------|----------|
| 1 | Eyebrow | Time, Trailing 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 |
| — | Date & Attendance Block | Date, Month, Attendance | see table above | Always |
| — | Card Background | — | Surface White (LM) / Black (DM) | Always |

Eyebrow detail: the time shows **time only** (the date sits in the Date Block). 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`).

## Configurations (data-slot presets)

Fixed Height and Compact are **not separate variants**; they are the one + Date Block card with a particular slot set. Slot visibility is a per-card setting; the named configurations are just common presets.

| Configuration | Content slots | Height | Notes |
|---------------|---------------|--------|-------|
| Full (default) | Eyebrow, Title, Subtitle, Supporting I + II, Listing Description, Button, Footnote | Variable (grows to content) | The complete slot stack. |
| Fixed height | Eyebrow, Title, Subtitle, Supporting, Footnote | Uniform | Listing Description and Button off, so a row of cards holds the same height. |
| Compact | Eyebrow, Title, Subtitle | Shortest | Has a structural change, not just slot visibility: the attendance **Icon and Label shift out of the Date Block into the eyebrow** (the time/date slot), leaving the Date Block carrying the **date only**. |

All three use the same component, type ramp and tokens. Build the Full configuration; Fixed is the same card with slots toggled off. See the Examples page for the three side by side.

> **Note: Compact may become its own variant.** Fixed Height is purely a slot-visibility setting. Compact is not: moving the attendance Icon and Label out of the Date Block and into the eyebrow is a structural change to the card, so Compact may be promoted from a configuration to a defined variant. Treat this as provisional pending that decision.

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

Content-column gaps follow 5050 Essentials exactly. The Date Block spans the full card height independent of the content gaps. 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.

## Typography

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

| Slot | Datapoint | Role | Small | Medium | Large |
|------|-----------|------|-------|--------|-------|
| Date Block | Day numeral | Display | Poppins 700 · 72 / 80 | Poppins 700 · 72 / 80 | Poppins 700 · 72 / 80 |
| Date Block | Month | Headline | Poppins 600 · 20 / 28 | Poppins 600 · 20 / 28 | Poppins 600 · 20 / 28 |
| Date Block | Attendance label | Label / Section | Inter 600 · 12 / 16 | Inter 600 · 12 / 16 | Inter 600 · 12 / 16 |
| Eyebrow | Time | Callout | Inter 500 · 15 / 22 | Inter 500 · 15 / 22 | Inter 500 · 15 / 22 |
| Primary | Title | Headline | Poppins 600 · 20 / 28 | 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 · 13 / 20 | Inter 400 · 13 / 20 |
| 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 |

The Title ramp is Headline at every size: `sm` (20 / 28) at Small and Medium, `base` (24 / 32) at Large.

## Measure

The content column carries the same intentional maximum widths as 5050 Essentials, measured from the start of the content column (not the card edge).

| Slot | Max width |
|------|-----------|
| Primary (Title) | 460px |
| Secondary (Subtitle) | 440px |
| All other text slots | 420px |

## Colour tokens

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

- Text 1: primary text (title, time, subtitle, listing description, date numeral + month).
- Text 2: muted text (location, taxonomy, footnote).
- Accent: trailing icon and CTA. Interactive only.
- Icon: attendance-mode icon (informational).
- Primary Brand (`base_colours_primary`): the default fill of the Date Block's Block background container (which can alternatively carry artwork). Structural, not interactive.
- Surface: card background, White (LM) / Black (DM); Format Label tile, SSL1 (LM) / SSD1 (DM).

## Acceptance criteria

- The Date Block is always present, full height, 136px wide, built on the Block background container (Primary Brand fill by default; may carry flexing artwork).
- The date appears **only** in the Date Block; the eyebrow time slot shows time only, never the date.
- Date numeral and month take Text 1 (black in LM, white in DM against the default Primary Brand fill; keep adequate contrast over artwork); the attendance icon takes the Icon token (informational, not Accent).
- Content-column slot order is fixed: Eyebrow → Primary → Secondary → Supporting I → Supporting II → Listing Description → Button → Footnote.
- Eyebrow and Primary are always present; all other content slots are optional and driven by a per-card setting. Absent slots close up.
- The trailing icon is always Accent; it is the card's only interactive affordance.
- `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.

## Reference renders

Render paths are relative to this component folder.

- Preview cards (each size, both modes): `cards/db-{sm,md,lg}-{lm,dm}.png`