Docs draft
PromoCard
Component storyFigma (PromoCard set) ↗React component ↗DSDS entity ↗
When to use it
useEditorial spotlights: a series pitched with poster, description, and direct CTAs (home rails, campaign shelves).
avoidPlain catalog browsing — promo weight is for curated placements, not grids.
poster-card PosterCard.Variants
state · rest / hover — Hover washes the poster. The card body is not a link; its Buttons are the interactive parts.
Anatomy
poster — 2:3 art, 180px.
content — Title (title-3) → 'Sub | Dub' meta (caption) → description (body-sm, secondary) → Actions slot.
actions — Slot; canonical pair = Button primary ('Start watching…') + Button brand outline ('Add to watchlist'). Ink-on-orange per the Button ruling.
Design specifications
| surface | color.bg.secondary, space.16 padding, gap space.24 |
| title | type.title-3 in color.text.primary |
| description | type.body-sm in color.text.secondary |
| width | 640px |
Accessibility
CTAs are real Buttons with outcome-named labels. The old white-on-orange CTA text (2.2:1) is corrected by composing the ratified Button (ink on accent, 7.1:1).