Content
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
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.
Anatomy
Chevron: Navigation controls to move between content
Content area: The main area displaying the current content
Pause/play button: Controls for autoplay functionality
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 contrastOutside - 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 contrastOutside - place chevrons inside the content area if the content cannot be overlaid with the tabs (e.g., UI controls)
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.
 |  |