Docs draft
Carousel
Component storyFigma (Carousel + blocks) ↗React component ↗DSDS entity ↗
When to use it
useHorizontal card rails: series rows, episode rows, manga rows, news rails. The cards in the slot decide the rail's look.
avoidThe billboard at the top of a page — that is its own anatomy, not a card rail.
hero-carousel HeroCarousel.Anatomy
cards slot — Any card row: PosterCard, MediaCard, NewsCard instances. Card Style/type axes from the old sets live here as composition.
arrows — .CarouselArrow Card style at the edges (Hero/Card × Left/Right × Rest/Hover/Focus; composes Icon/Chevron).
pagination — .CarouselDot for slider contexts — dot count and active index are data, never variants.
Design specifications
| gap | space.16 |
| arrow-card | 40px, color.bg.secondary, hover color.bg.pressed |
| arrow-focus | 2px color.text.primary ring |
| scroll | scroll-snap x, arrows page by ~90% of the viewport |
Accessibility
role=group with aria-roledescription=carousel and a label naming the rail. The track is a real list; arrows are labeled buttons. Native horizontal scrolling and tabbing through cards keep working without the arrows.