# + Speakers — Build Pack

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

| | |
|---|---|
| Component | Events / Cards / Foreseeable / + Speakers |
| ID | `event-card-4c-essentials-speakers` |
| Container span | 4C |
| Builds on | Essentials (see the Essentials build pack) |
| Composes with | + Media (the strip sits below any media container) |
| Status | Ready for build |
| Sketch doc | WDS Design System v3.0 |
| Sketch page | Components > Events > Cards > Foreseeable > + Speakers |
| Registries | Colour + Typography (token and type values) |
| Version | WDS v3.0 |
| Generated | 2026-06-17 |

## Inherits Essentials

The slot model, slot order, colour tokens, type ramp and base 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 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 |
|----------|-------|
| Strip footprint | 280 × 40 (left-aligned to the content column) |
| 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 |

- The avatars do not overlap — they sit in a row at an 8px gap.
- When more speakers exist than the five visible slots, the **+N counter** takes the final slot and shows the remaining count.
- Avatar shape (Circle / Square) is a per-card setting, not a separate variant.
- The strip introduces no new colour: the avatar frame and counter inherit the card's surface and Text tokens.

## Spacing

| Size | Above (copy → strip) | Below (strip → card edge) |
|------|----------------------|---------------------------|
| Small | 16 `md` | 16 `md` |
| Medium | 16 `md` | 16 `md` |
| Large | 24 `xl` | 16 `md` |

Spacing scale: `xs` 8, `sm` 12, `md` 16, `lg` 20, `xl` 24. Only Large opens the top gap to `xl` (24); Small and Medium use `md` (16). The bottom gap is `md` (16) in every size. All other spacing inherits Essentials.

## Composition with media

The speaker strip is independent of the media container. When the card also carries media (the **+ Media** variant), build the container per the + Media build pack; the strip still sits below the content stack at the spacing above. Media container and avatar shape are both per-card settings.

## Acceptance criteria

- Build on the Essentials 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.
- Large opens the top gap to `xl` (24); Small and Medium use `md` (16); the bottom gap is `md` (16) in every size.
- The strip adds no new colour token; both Light Mode and Dark Mode render correctly.

## Reference renders

Example cards across the media containers (Sky / Ribbon / Letterbox / Standard) and both avatar shapes, all three sizes, both modes, are in `cards/ex-<container>-<circle|square>-<s|m|l>-<lm|dm>.png`.