Carousel

Scrolling item layout with hero and compact layouts. Part of the Containment family.

Live demo

Usage

<span class="orbit-carousel" role="group" aria-label="carousel">
  <!-- Carousel composition: container, content, state layer -->
</span>

Anatomy

1. Container  2. State layer  3. Content (label / icon)  4. Focus ring. Optional: badge, supporting icon on the end side.

Properties

Property	Type / values	Description
Variant	`filled` · `tonal` · `outlined` · `text`	Visual emphasis of the control.
Disabled	`boolean`	Removes the control from the tab order and applies the 38% on-surface opacity.
Size class	`compact` · `medium` · `expanded`	Window-size adaptation; the default resolves from the container.
Density	`0` – `3`	Progressively tighter vertical rhythm, docked at 36px minimum.

Design tokens

This component reads --md-carousel-container, --md-on-surface, --md-outline and elevation levels 0–2. The full reference ships in the token bundle.