Carousel

24.1

The carousel component is used to cycle through a series of content in a single view.

Carousel

24.1

The carousel component is used to cycle through a series of content in a single view.

Overview

The carousel component is used to cycle through a series of content in a single view.

Usage

The carousel allows users to browse through multiple pieces of content within the same space.

Number of Tabs

  • It is recommended not use more than 6 tabs, if you need more than that, consider using a different UI

  • The component can show up to 9 tabs a time

Anatomy

  1. Chevron: Navigation controls to move between content

  2. Content area: The main area displaying the current content

  3. Pause/play button: Controls for autoplay functionality

  4. Tabs: Indicators showing the number of slides and current position.

Variants & Props

Autoplay

  • You can set a timer to automatically cycle through content

  • The timer can be customized to any number of seconds

  • When autoplay is turned on, a pause/play button will appear next to the tabs

Tabs

  • Overlay/Inside - place tabs inside the content area if the content can be overlaid with the tabs (e.g., promotional images)

    When using overlaid tabs, you can customize the tabs and container background colors to optimize the color contrast

  • Outside - place tabs inside the content area if the content cannot be overlaid with the tabs (e.g., UI controls)

  • No tabs

Chevrons Position

  • Overlay/Inside - place chevrons inside the content area if the content can be overlaid with the tabs (e.g., promotional images)

    When using overlaid chevrons, you can customize the chevrons colors to optimize the color contrast

  • Outside - place chevrons inside the content area if the content cannot be overlaid with the tabs (e.g., UI controls)

Content Guidelines

We use alert banners to communicate system status, warnings, errors, and other important information. We use carousels to present a sequence of related content in a compact and scannable format.

Carousels help users discover information progressively without overwhelming the page or interrupting their primary task.

We follow these basic rules while writing content for a carousel:

  • Voice: Be insightful and clear; do not use heavy jargon.

  • Tone: Be helpful and informative; avoid promotional or exaggerated language.

  • Language: US English

  • Voice Structure: Active voice

  • Casing: Main/Page/Carousel title in Title Case, heading and description for each carousel in sentence case, and keep proper nouns as is; links in sentence case.

  • Punctuation: Use no period for short sentences or sentence fragments. Use full punctuation only when the message is a complete sentence. Do not use exclamation (!) and ellipsis (…).

  • Words and phrases to avoid: Please, successfully, oops, sorry, uh-oh, something went wrong, you shall, you can.

When writing for a carousel:

  • Be concise and contextual, allowing users to understand each item independently while maintaining continuity across slides.

  • Keep each slide focused on a single message.

  • Avoid dense paragraphs; use short sentences or brief phrases.

  • Ensure content remains readable at a glance.

  • Do not rely on previous or next slides to complete a sentence.

Sequence and step usage

Use the word “step” only when the user must perform actions in the exact order shown in the carousel.

  • If the actions must be completed sequentially, label them clearly as steps. Example: Step 1 of 5

  • If the user can follow the content in any order, do not imply a sequence. Example: 1 of 5 or 1/5

Using “step” when no strict order is required can mislead users and create confusion in how they decipher the content.

Accessibility

Timer

If a timer is set to auto update content, having a pause/play control is necessary so:

  • People who are distracted by movement can pause animations

  • People who need more time to read can pause animations, providing them with sufficient time to read and understand carousel content

Color Contrast

It's hard for the design system team to predict what sort of images or content needs to be used in inline control carousels, that's why we let it up to each designer to choose the background color for the tab group.

When using the variant with inline controls make sure that the color contrast between the tab and tab group background is at least 3:1.

Example

In the following example, the tab group background is using [--color-background-tertiary] + [--opacity-fade-30]. So the contrast between the selected tab and tab group background is 1.91:1 which is not enough. But after setting the tab group background to [--color-background-base] the contrast became enough.

Help make this page more useful.

Help make this page more useful.