# Letterbox Banner · Essentials — Build Pack

Component build specification for the dev team. The Letterbox banner is a **singular** promotional object that resolves to exactly one event, promoted full width (12C) on a **fixed-height** surface. Its **media defines the background container** the block sits on — the distinction from a full-width Card, whose media is a discrete side-by-side element. Essentials content is **centralised** in the container. Token-led: build against semantic tokens, not raw hex.

| | |
|---|---|
| Component | Events / Banners / Letterbox / Essentials |
| ID | `event-banner-letterbox-essentials` |
| Container span | 12C (full content width) |
| Container | Letterbox — fixed height, anchored to the standard media containers |
| Cardinality | singular · one event |
| Status | Ready for build |
| Sketch doc | WDS Design System v3.0 |
| Sketch page | WIP: Components > Events > Banners > Letterbox > + DateBlock |
| Registries | Colour + Typography (token and type values) |
| Version | WDS v3.0 |
| Generated | 2026-07-03 |

## Layout

| Property | Value |
|----------|-------|
| Span | 12C — full content rail |
| Height | fixed, anchored to the standard media containers (letterbox) |
| Surface | the letterbox media is the background; a scrim overlay keeps content legible |
| Arrangement | content centralised in the container over the media |
| Text | Text 1 per the slot model |
| CTA | Accent (rose) — interactive only |

## Slots

| Slot | Role | Data | Notes |
|------|------|------|-------|
| Date & Time | Callout / lg | Date · Time | led by an inline attendance-mode icon (In Person) |
| Event Title | Headline / lg | Title | the centralised focal line |
| Event Subtitle | Subhead / base | Subtitle (optional) | |
| Location | Meta / base | Location (optional) | |
| Listing Description | Body / base | Description (optional) | |
| Call to action | Button / base | — | Secondary button (Find Out More) + arrow icon; Accent |
| Sponsor | — | Sponsor (optional) | sponsor lockup, bottom-right |
| Trailing menu | — | — | overflow (…) menu, top-right |

Optional slots are visibility settings, not separate variants.

## Acceptance criteria

- Banner spans the full 12C rail at a fixed letterbox height; content centralised over the media.
- The media defines the background container; a scrim keeps text legible (do not lay a card surface behind the copy — that is a Card).
- Both Light and Dark render correctly; Accent rose stays mode-agnostic; text and icons flip.
- Type roles resolve to the Typography Role Registry; no raw hex — every colour resolves to a semantic token.

## Open questions

- Breakpoint behaviour across sizes is not yet resolved.
- Text-over-media legibility in Light Mode (black Text 1 over the letterbox media) to be validated against the media set.

## Reference renders

Both modes are in the page preview and in `cards/lm.png` · `cards/dm.png`.