# + Media + Speakers (5050) — Build Pack

Component build specification for the dev team. + Media + Speakers is the 5050 + Media card with a Speakers strip added beneath the content. Build the base from the 5050 + Media build pack; this pack covers only the speaker strip. Token-led: build against semantic tokens, not raw hex.

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

## Inherits + Media

The media containers, slot model, colour tokens, type ramp and base spacing are exactly the 5050 + Media card and do not change. Do not re-document or re-implement them; reuse the + Media component and add the speaker strip beneath the content stack.

## The speaker strip

A single horizontal row of speaker avatars below the content stack. It is the only thing this variant adds.

| Property | Value |
|----------|-------|
| Avatar | 40 × 40, sourced from a 100×100 image |
| Avatar pitch | 48 (a 40 avatar + an 8 gap) |
| Visible avatars | up to 5 |
| Overflow | a +N counter chip in the 6th slot (40 × 40) closes the row |
| Avatar shape | a setting: **Circle** or **Square** (current renders are Circle) |

- The avatars sit in a row at an 8px gap; they do not overlap.
- When more speakers exist than the five visible slots, the **+N counter** takes the final slot and shows the remaining count.
- The strip introduces **no new colour**: the avatar frame and counter inherit the card's surface and Text tokens.

## Composition with media

The strip sits below the content stack regardless of media container. Both the media container and the avatar shape are per-card settings. **Side-by-side containers (Sky · VM · Sq)** only suit short cards, and adding a speaker strip tightens that — prefer a **stacked container (Rib · Let · SM)** when the card also carries speakers.

## Acceptance criteria

- Build on the 5050 + Media component; add one speaker strip beneath the content stack.
- Strip holds up to five 40px avatars at an 8px gap, with a +N counter in the sixth slot on overflow.
- Avatar shape setting renders Circle or Square.
- The strip adds no new colour token; both Light Mode and Dark Mode render correctly (avatar frame and +N chip follow the surface).
- The container token is appended to the card id (`…-media-speakers-<token>`).

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