# + Media — Build Pack

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

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

## Inherits Essentials

The slot model, slot order, colour tokens, type ramp and spacing are exactly the 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.

| Container | Token | Ratio | Position | On 4C |
|-----------|-------|-------|----------|-------|
| Skyscraper | `sky` | 1:4 | Side (left strip) | Yes |
| Ribbon | `rib` | 4:1 | Stacked (top) | Yes |
| Letterbox | `let` | 3:1 | Stacked (top) | Yes |
| Standard Media | `stan` | 16:9 | Stacked (top) | Yes |
| Vertical Media | `vm` | 9:16 | — | No (needs a wider card) |
| Square | `sq` | 1:1 | — | No (needs a wider card) |

- **Skyscraper** sits on the left as a full-height side strip; the content column indents to clear it. The other three stack full-width on top of the content.
- Only `media-stan` supports **Sponsor overlays** (a tagline and up to two logos).

## Usage guidance (general direction, not a hard rule)

Keep the base + container short. Skyscraper suits a short, wide card (eyebrow and title only). Among the stacked containers, a shallow one (Ribbon) carries more content, a deep one (Standard) carries less. Which container/card combinations are valid or preferred is the resolution layer's call, not the component's.

## Acceptance criteria

- Build on the Essentials component; add exactly one media container.
- Container is a fixed frame at its fixed ratio; place the pre-set artwork, no runtime cropping.
- Skyscraper indents the content column; stacked containers sit above the Eyebrow 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, all three sizes, both modes, are on the Examples page (`examples/`) and in `examples/cards/ex-<token>-<s|m|l>-<n>-<lm|dm>.png`.