Skip to content

Carousel

A carousel displays a sequence of slides in a scrollable track. It is commonly used for featured content, hero sections, and media galleries.

Ready to use

DesignDevelopAccessibility

The Carousel Progress Indicator is a high-impact navigation element for hero sections and featured content. It gives visual feedback on how long the current slide stays on screen and lets users jump between the key content pillars. In the CDS Figma library it is specified on its own as the row of timed control bars; the styleguide wraps that indicator inside a full carousel of slides.

Anatomy

Section titled “Anatomy”
Slide 1
Slide 2
  1. Carousel
  2. Track
  3. Slide
  4. Progress indicator
  5. Control

The CDS Figma source documents only the progress indicator — the row of controls pinned above. Each control is a timed bar with an optional label, and the active one fills over time. The styleguide expands that indicator into a full carousel: a track of slides with the progress indicator overlaid at the bottom, so the pins cover both the broader carousel and the indicator Figma specifies.

When to use it

Section titled “When to use it”

Use the progress indicator when:

  • Content is high-impact and browse-first — hero sections, featured galleries, and campaign pillars where a timed, self-advancing rhythm suits the content.
  • Users benefit from seeing how long a slide stays on screen and being able to jump straight to another pillar.

Avoid it when:

  • The task is functional or utility-driven (checkout, a settings menu, a complex form). Users should never feel rushed by a disappearing interface.
  • A slide carries more than a couple of sentences or dense data — people read at different speeds, and an auto-playing timer frustrates slower readers.
  • The set is large (roughly more than seven to ten items). High item counts make each bar too narrow to read or tap; reach for standard pagination or a “view all” gallery instead.
  • The imagery behind it is low-resolution or low-contrast. The indicator draws the eye to the background and will highlight weak assets rather than hide them.

Properties

Section titled “Properties”

State

Each control moves through four states. Rested shows a thin, muted bar. Hover thickens the bar and shifts it to the hover colour on pointer devices for any non-active item. Focus draws the CDS focus ring around the item for keyboard users. In progress / Active thickens the bar and fills it left-to-right to mark the current slide and how much of its time remains.

Scheme

Neutral or Contrast. Because the indicator usually overlays imagery, Contrast flips the bar and label to the light foreground tokens so they stay legible on dark media; Neutral keeps the dark foreground for light surfaces. It follows the CDS scheme set on the surrounding wrapper.

Label

Each control can show a short text label beneath its bar (on by default) that names the slide it jumps to. Hide the label to fall back to bare progress bars when horizontal space is tight.

Progress & timing

The active control’s bar animates from empty to full over a set duration (5 seconds by default) to signal the slide’s remaining time before it advances. Under reduced-motion preferences the active bar renders full with no animation, so the current slide is still marked.

Platform considerations

Section titled “Platform considerations”

Desktop

The controls sit in a horizontal row, evenly spaced, overlaid at the bottom of the hero. Hover thickens each bar and a visible focus ring supports keyboard navigation between pillars.

Tablet

Touch and pointer both work. Keep labels short so neighbouring bars don’t overlap, and make sure the indicator stays clear of any content sitting over the same imagery.

Mobile

Touch-first, and the tightest constraint. Thin horizontal bars can be hard to tap accurately — keep the tap target at least 44 × 44 px, trim the item count, or switch to a count indicator when the bars would get too small.

Best practices

Section titled “Best practices”

The indicator earns its high-impact styling only when the content behind it can carry the attention it draws.

Do

Reserve it for high-impact hero and featured content, keep labels short (roughly 10–12 characters) so they don’t wrap or overlap, use the Contrast scheme when it overlays dark imagery so the bar and label stay legible, and keep the item count low so each bar stays wide enough to read and tap.

Don't

Don’t use a timed carousel for functional tasks like checkout, settings, or forms, don’t auto-advance slides that are dense with text or data, don’t exceed roughly ten items (the bars become too small to be useful or accessible), and don’t overlay the indicator on low-quality or low-contrast imagery.

Content guidelines

Section titled “Content guidelines”

Labels are pillar names, not sentences — keep each to a short word or two (about 10–12 characters), like “Overview”, “Models”, or “Offers”. Aim for a consistent length across the set so the bars stay evenly weighted, and localise the labels through the same strings used elsewhere in the product.