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

\+ Date Block + Media is the [+ Date Block](../date-block/) card with a stacked **media container** in the top band, sitting beside the date tile. The copy column, type ramp and spacing are inherited from + Date Block / Essentials unchanged; the media container (and an optional Sponsor overlay) are the only additions. The media container is the build axis: pick one of three.

## Media containers

All three are **stacked-top** containers (the side-by-side ones are not supported here, as the card runs too tall). Each is a fixed frame; crops are handled centrally (Brand Pack › Artwork), so there is no runtime cropping.

| Container | ID token | Ratio | Date Block | Sponsor |
|-----------|----------|-------|------------|---------|
| Ribbon | `rib` | 4:1 | Compact only | No |
| Letterbox | `let` | 3:1 | Full (default) or compact | Yes |
| Standard Media | `stan` | 16:9 | Full (default) or compact | Yes |

- **Ribbon is always the compact date block.** The band is too shallow to carry the full date block beside it, so the date tile goes date-only and the attendance icon moves inline into the Top Slot.
- **Letterbox and Standard support both date-block formats** as a per-card setting; **full is the default** (attendance shown as a Format Label in the date tile).
- **Sponsor overlay** (an "In partnership with" tagline and up to two logos) is supported on **Letterbox and Standard Media**, not Ribbon.
- Decreasing copy as the media deepens: Ribbon carries the most, then Letterbox, then Standard.

## Sizing

Small, Medium and Large are densities of one component, driven by the type ramp. Target density with `data-size="sm|md|lg"`. Both Light Mode and Dark Mode are required.

## Slots

| # | Slot | Holds | Colour token | Presence |
|---|------|-------|--------------|----------|
| 1 | Media Container | Artwork (rib / let / stan) | Surface | Required |
| 2 | Date Block | Date, Month, Attendance | Primary Brand; Text 1; Icon | Required |
| 3 | Sponsor | Tagline, Logo(s) | Text 1 | Optional (Letterbox / Standard) |
| 4 | Top Slot | Time | Text 1 | Required |
| 5 | Trailing Icon | More / Arrow | Accent | Optional |
| 6 | Primary | Event Title | Text 1 | Required |
| 7 | Secondary | Event Subtitle | Text 1 | Optional |
| 8 | Supporting | Location / Taxonomy | Text 2 | Optional |
| 9 | Listing Description | Listing Description | Text 1 | Optional |
| 10 | Button | Call to Action | Accent | Optional |
| 11 | Footnote | Footnote | Text 2 | Optional |
| — | Card Background | — | Surface White (LM) / Black (DM) | Always |

The Top Slot shows time only (the date sits in the Date Block). On Ribbon the attendance icon leads the Top Slot; on Letterbox / Standard (full date block) attendance is the Format Label in the date tile.

## Typography

Inherited from + Date Block unchanged.

| Slot | Role | Small | Medium | Large |
|------|------|-------|--------|-------|
| Date numeral | Display / lg | Poppins 700 · 72 / 80 | Poppins 700 · 72 / 80 | Poppins 700 · 72 / 80 |
| Month | Headline / sm | Poppins 600 · 20 / 28 | Poppins 600 · 20 / 28 | Poppins 600 · 20 / 28 |
| Attendance label | Label / Section | Inter 600 · 12 / 16 | Inter 600 · 12 / 16 | Inter 600 · 12 / 16 |
| Time | Callout | Inter 500 · 14 / 20 | Inter 500 · 15 / 22 | Inter 500 · 15 / 22 |
| Title | Headline | Poppins 600 · 20 / 28 | Poppins 600 · 20 / 28 | Poppins 600 · 24 / 32 |
| Subtitle | Subhead | Inter 500 · 13 / 18 | Inter 500 · 14 / 20 | Inter 500 · 16 / 24 |
| Supporting | Utility | Inter 500 · 12 / 16 | Inter 500 · 12 / 16 | Inter 500 · 12 / 16 |
| Listing Description | Body | Inter 400 · 13 / 20 | Inter 400 · 15 / 22 | Inter 400 · 15 / 22 |
| Button | Button | Inter 600 · 14 / 20 | Inter 600 · 14 / 20 | Inter 600 · 14 / 20 |
| Footnote | Meta | Inter 400 · 12 / 16 | Inter 400 · 12 / 16 | Inter 400 · 12 / 16 |

The Title ramp is Headline `sm` at Small and Medium, `base` at Large.

## Colour tokens

- Text 1: title, time, subtitle, listing description, date numeral + month.
- Text 2: location, taxonomy, footnote.
- Accent: trailing icon and CTA. Interactive only.
- Icon: attendance-mode icon (informational).
- Primary Brand (`base_colours_primary`): the Date Block's Block background container default fill.
- Surface: card background, White (LM) / Black (DM); media container frame.

## Acceptance criteria

- One stacked media container (Ribbon 4:1, Letterbox 3:1, or Standard 16:9) sits in the top band beside the date tile.
- Ribbon uses the compact date block (date-only tile, attendance icon inline in the Top Slot). Letterbox and Standard default to the full date block; compact is a supported setting.
- Sponsor overlay is available on Letterbox and Standard only.
- The copy column matches + Date Block / Essentials exactly (slots, type ramp, spacing).
- The trailing icon is always Accent; the attendance icon takes the Icon token.
- `data-size` drives density; both Light Mode and Dark Mode render correctly.

## Reference renders

Render paths are relative to this component folder.

- Preview cards (each container, size and mode): `cards/db-{ribbon,letterbox,standard}-{sm,md,lg}-{lm,dm}.png`