Docs draft
NewsCard
Component storyFigma (NewsCard set) ↗React component ↗DSDS entity ↗
When to use it
useEditorial articles: news hubs, latest-news rails (stack), top-news lists (row).
avoidAnything playable. NewsCard is deliberately a plain image — no play glyph, duration, or progress.
media-card MediaCard.Variants
layout · stack / row — The old Type axis: Latest = stack (image over text), Top = row (thumb beside text).
state · rest / hover / focus / loading — The state axis.
Design specifications
| headline | type.label-lg in color.text.primary |
| date-byline | type.caption in color.text.secondary |
| stack-width | 320px, image 16:9 |
| row | space.8 padding on color.bg.secondary, image 128px |
| focus-ring | 2px color.text.primary, offset 2 |
Accessibility
Whole card is one link; headline is the accessible name. Date and byline are plain text, not links.