# Essentials (Full Width) — Build Pack

Component build specification for the dev team. Full Width (FW) Essentials is the text-led base card at 12C — the full content width, one event per row. It is **content-led**: a content column beside an optional side-mounted media panel, never copy laid over media (that is a Banner). Token-led: build against semantic tokens, not raw hex.

| | |
|---|---|
| Component | Events / Cards / FW / Essentials |
| ID | `event-card-fw-essentials` (append the container token when media is used, e.g. `…-essentials-sky`) |
| Container span | 12C (full content width, one event per row) |
| Builds on | Essentials (shared slot model + type ramp) |
| 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 |
| Registries | Colour + Typography (token and type values) |
| Version | WDS v3.0 |
| Generated | 2026-06-30 |

## Inherits Essentials

The content schema, slot order, type ramp and colour tokens are exactly the shared Essentials model and do not change. Do not re-document or re-implement them — reuse the Essentials slot model. FW changes only the **span** (12C) and adds an **optional side-mounted media panel**. Pull exact measurements (column widths, gutter, panel widths per container) from the Sketch page named above; they are not duplicated here so this pack cannot drift from the master.

## Layout

| Property | Value |
|----------|-------|
| Span | 12C — full content rail (1376 reference) |
| Arrangement | content column beside the media panel; copy never overlays media |
| Surface | card surface = `Surface Scale Light/White` (LM) / `Surface Scale Dark/Black` (DM) |
| Text | Text 1 / Text 2 / Link tokens per the Essentials slot model |
| CTA | Accent (rose) — interactive only |

## Media panel (optional)

The full-width card mounts media as a **side panel** on the content row. The container sets the panel aspect:

| Container | Token | Aspect |
|-----------|-------|--------|
| Skyscraper | `sky` | 1:4 |
| Vertical Media | `vm` | 9:16 |
| Square | `sq` | 1:1 |
| Standard Media | `stan` | 16:9 |

With no container the card is text-only across the rail. Media images are mode-agnostic content; the surrounding card surface and text follow the mode.

## Acceptance criteria

- Card spans the full 12C content rail; content column and media panel sit side by side.
- Content (schema, slots, type ramp) matches the shared Essentials model — no new text slots.
- Optional media panel renders in any of the four containers; the container token is appended to the card id (`…-essentials-<token>`).
- Both Light Mode and Dark Mode render correctly: card surface White→Black, text and icons flip, Accent rose and any logo green stay mode-agnostic.
- No raw hex — every colour resolves to a semantic 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`).