# + Media (5050) — Build Pack

Component build specification for the dev team. + Media is the 5050 Essentials base card with one fixed media container added (the former "Out The Box" default). Build the base from the 5050 Essentials build pack; this pack covers only the media layer. Token-led: build against semantic tokens, not raw hex.

| | |
|---|---|
| Component | Events / Cards / 5050 / + Media |
| ID | `event-card-5050-media` (append the container token, e.g. `…-media-sky`) |
| Container span | 6C (two-up, media-led group) |
| Builds on | Essentials (see the 5050 Essentials build pack) |
| Status | Ready for build |
| Sketch doc | WDS Design System v3.0 |
| Sketch page | READY: Components > Events > Cards > 5050 > + Media |
| Registries | Colour + Typography (token and type values) |
| Version | WDS v3.0 |
| Generated | 2026-06-20 |

## Inherits Essentials

The slot model, slot order, colour tokens, type ramp and spacing are exactly the 5050 Essentials card and do not change. Do not re-document or re-implement them; reuse the Essentials component and add the media container.

## The media container

+ Media adds one fixed-frame media container. Each container is a **fixed frame at a fixed aspect ratio**; the artwork is **pre-set centrally** (Brand Pack > Artwork) and produced to the frame, so there is no runtime cropping. The abbreviated name is the container's ID token. 5050 supports **every** container; they divide by placement.

| Container | Token | Ratio | Placement |
|-----------|-------|-------|-----------|
| Skyscraper | `sky` | 1:4 | Side by side |
| Vertical Media | `vm` | 9:16 | Side by side |
| Square | `sq` | 1:1 | Side by side |
| Ribbon | `rib` | 4:1 | Stacked (top) |
| Letterbox | `let` | 3:1 | Stacked (top) |
| Standard Media | `stan` (SM) | 16:9 | Stacked (top) |

- **Side by side** containers sit beside the copy column; the copy indents to clear the media.
- **Stacked** containers sit full-width on top of the content.
- Standard Media (`stan`) carries the Sponsor overlay where used (a tagline and up to two logos).

## Side-by-side constraint (important)

The side-by-side containers (Skyscraper, Vertical Media, Square) **only work on cards that are not very tall** — a small number of slots and generally smaller type. The media sits beside the copy, so the copy column height must stay within the media height. When the card carries more content, use a stacked container (Ribbon, Letterbox, Standard Media), which grows with the copy.

## Acceptance criteria

- Build on the 5050 Essentials component; add exactly one media container.
- Container is a fixed frame at its fixed ratio; place the pre-set artwork, no runtime cropping.
- Side-by-side containers indent the copy column and are only offered on short cards; stacked containers sit above the content with the standard top gap.
- The container token is appended to the card id (`…-media-<token>`).
- Both Light Mode and Dark Mode render correctly.

## Reference renders

Example cards per container, both modes, are in the page preview and in `cards/ex-<token>-<n>-<lm|dm>.png` (token = `sky · vm · sq · rib · let · stan`).