MediaCard

Docs draft

Component story Figma (MediaCard + .Thumbnail sets) ↗React component ↗Thumbnail block ↗DSDS entity ↗

When to use it

useAny landscape media entry: episode grids, history, watchlist, search results, release-calendar rows. Context lives in data (thumbnail state, meta line, trailing actions), never in new variants.

avoidSeries browsing where the 2:3 key art is the identity. poster-card PosterCard.

avoidEditorial articles — they need none of the playback chrome. news-card NewsCard.

Variants

layout · tile / row — tile = vertical thumbnail + text; row = horizontal list entry on bg/secondary with optional airtime (the old Release Episode Card).

state · rest / hover / focus / loading — Hover: tile washes the thumbnail, row lifts to bg/pressed. Focus: 2px text/primary ring. Loading: skeleton.

Anatomy

thumbnail — .Thumbnail block: Wide/Poster × Default/Progress/Watched/Coming Soon/Unavailable/Missing/Loading, with Duration chip on bg/scrim, accent progress bar, state glyphs on a scrim disc, and a Label slot (compose Tag).

text stack — Parent title (caption, secondary) → Title (label-lg, primary) → Meta (body-sm, secondary).

airtime — Row layout only. The old scooter/base teal died with Link's Scooter variant; airtime rides text/positive.

trailing — Slot for kebab / heart / trash — the old .Right Decoration set as composition.

Design specifications

tile-width	320px, thumbnail 16:9
row	space.8 padding on color.bg.secondary, thumbnail 128px, gap space.12
title	type.label-lg in color.text.primary
meta	type.body-sm in color.text.secondary
duration-chip	type.body-sm on color.bg.scrim, radius.xs, inset space.8
progress	4px color.accent.base on color.ink.500 track
focus-ring	2px color.text.primary, offset 2

Accessibility

Card renders as a link when href is given. Duration/progress data is exposed via a progressbar role on the thumbnail, and the progressbar MUST carry an accessible name (“<title> — watch progress”, falling back to “Watch progress”) — a bare role with only aria-valuenow fails axe aria-progressbar-name (caught 2026-09-01 by the Storybook a11y gate). Watched/Unavailable overlays keep their text chips — never icon-only. The duration chip sits on bg/scrim over artwork; contrast is content-dependent (as in the old system) — code may add a stronger backdrop.