Docs draft
HeroCarousel
Component storyFigma (HeroCarousel) ↗React component ↗DSDS entity ↗
When to use it
carousel Carousel.Anatomy
art — Full-bleed image with a start-edge legibility gradient (rgb scrim, not a token — it grades to transparent over art).
logo slot — Title-art image; a text title is the fallback for Type=Other content.
meta + description — caption in text.secondary; body-sm in text.primary for legibility on art. Rating chips compose Tag / future RatingMark.
actions slot — Default: Button primary + a 44px accent-outline watchlist circle (inline CR bookmark glyph).
tabs — .CarouselTab bars; the active bar's autoplay progress fill is a code animation.
arrows — .CarouselArrow Hero style: bare 32px chevrons that gain a plate on hover.
Design specifications
| aspect | 2:1 (breakpoint crops are code's job) |
| content-gap | space.16 |
| tab | 48×4, color.text.primary (rest at 40% opacity) |
| meta | type.caption in color.text.secondary |
| description | type.body-sm in color.text.primary |
Accessibility
Tab — reaches CTAs, slide tabs, and arrows in order
role=group + aria-roledescription=carousel; slide tabs are a tablist with per-slide labels; the logo wrapper carries role=img named by the series title. RTL comes from logical properties, not the old Orientation variants.