Carousel

Scroll-snap carousel (Material's CarouselView, Lozenge-flavoured): a horizontally scrolling strip of snap-aligned cards. Zero JS — scrolling, snapping, momentum, keyboard (when focusable content is inside) and RTL all come from the platform's scroll machinery. Use .carousel-hero for a center-snapping single-feature strip.

Root: .carousel on <div>, <ul>

Example

Sprint 14

Roadmap

<div class="carousel" aria-label="Recent boards"><div class="carousel-item"><div class="carousel-item-caption">Sprint 14</div></div><div class="carousel-item carousel-item-wide"><div class="carousel-item-caption">Roadmap</div></div></div>

Contract

Variants & modifiers

Class	Axis	Rules
`carousel-hero`	snap	optional · exclusive
`carousel-hero`	modifier	optional

Structure

Selector	Required	Description
`.carousel-item`	required	One or more snap-aligned items; .carousel-item-wide for 300px cards; optional .carousel-item-caption inside.

Accessibility

On	Attribute	Level	When
`.carousel`	`aria-label`	required	the strip is a meaningful region (recommended: aria-label plus role=region, or a list structure with ul/li)

Content scrolls: ensure items' interactive children are reachable by Tab (the scroller brings them into view). Provide a text alternative for image-only items via img[alt] or captions. Horizontal-scroll-only content should also be reachable another way on keyboard-only setups if it's primary navigation.

Nesting

Allowed in:

page content
card bodies

Never inside (or containing):

.carousel .carousel