# Essentials + Speakers (Full Width) — Build Pack

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

| | |
|---|---|
| Component | Events / Cards / FW / Essentials + Speakers |
| ID | `event-card-fw-speakers` (append the container token when media is used, e.g. `…-speakers-sky`) |
| Container span | 12C (full content width, one event per row) |
| Builds on | FW Essentials (which builds on the shared Essentials model) |
| Composes with | optional side media panel — Sky · VM · Sq · SM |
| Status | Ready for build |
| Sketch doc | WDS Design System v3.0 |
| Sketch page | READY: Components > Events > Cards > FW > Essentials + Media + Speakers |
| Registries | Colour + Typography (token and type values) |
| Version | WDS v3.0 |
| Generated | 2026-06-30 |

## Inherits FW Essentials

The span, content column, slot model, type ramp, colour tokens and the optional media panel are exactly the FW Essentials card and do not change. Do not re-document or re-implement them — reuse the FW Essentials component and add the speaker strip in the content column. Pull exact measurements from the Sketch page named above.

## The speaker strip

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

| Property | Value |
|----------|-------|
| Avatar | sourced from a 100×100 image |
| Layout | a row at an 8px gap; avatars do not overlap |
| Visible avatars | up to 5 |
| Overflow | a +N counter chip closes the row, showing the remaining count |
| Avatar shape | a setting: **Circle** or **Square** (current renders are Square) |

- The strip introduces **no new colour**: the avatar frame and counter inherit the card's surface and Text tokens.
- It composes with any media container; the media panel remains a side-mounted, optional element.

## Acceptance criteria

- Build on the FW Essentials component; add one speaker strip in the content column.
- Strip holds up to five avatars at an 8px gap, with a +N counter 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 (`…-speakers-<token>`).

## Reference renders

The base card and each container, both modes, are in the page preview and in `cards/<token>-<lm|dm>.png` (token = `base · sky · vm · sq · stan`).