Carousel

Best Practices

---

Variations

Variant	Description
Manual Control	Manual control carousels allow the customer to discover the content of a carousel by using the controls provided. Manual control may have full width slides or show more than one slide at a time as cards. Use this carousel when some content is more important or prominent than others.
Auto-rotate	Auto-rotate carousels automatically display slides on rotation, based on a specified delay. Users can manually rotate and pause slides if needed. Use when the rotating slides are equal in importance or prominence.

---

Recommendations

Slide Content

• Some users will only see the first slide or skip past them all as they can be misunderstood as advertisements. Consider manual vs auto-rotate depending variations on your content type.
• If the slide content is important to a user journey, use an alternative to carousel such as cards or repeat the content elsewhere in your journey.

When choosing content for your slides consider:

Context

• Where is this content going?
• Will the content fit in with the surrounding hierarchy?
• How long will the content stay on screen?
• Where are the slide picker controls? Are they hidden by the fold? Will they cover the content?
• What will the content look like at smaller or larger breakpoints?

Actions

• What can the user do? Will there be call to actions per slide?
• If there are call to actions, are they in a consistent location?
• Is there a more important action? Does the content need to rotate?
• Follow recommendations for Call to action links

Using Headings

• Always have text separate to images, this allows for assistive technologies to read and resize text
• Check for contrast between text and background, learn more about color accessibility
• For copy, follow our ux writing best practices

Using Images

• Provide alt text when appropriate
• How will the images resize?

Slide Types

Slides may be both full width of the carousel or contained in cards. When using cards you may choose standard or actionable variations of cards.

Choosing The Slide Picker Control

There are two types of slide picker controls:

1. Off slide (Recommended default)

• Positioned outside the slide area, typically below the carousel
• Advantage: Preserves the full slide space for content, preventing overlays or visual clutter
• Use this option whenever possible for optimal readability and design clarity

2. On slide

• Overlays directly on the slide
• Choose between light or dark background picker depending on your images
• Advantage: Saves vertical space, making it useful in tight layouts
• Trade-off: May obstruct important content—plan layout accordingly

Slider Indicator Styles

You can choose from two styles to indicate slide progression:

1. Text-based: Example: Slide 1 of 5 or Image 1 of 5

• Use when clarity or accessibility is a priority
• Can be customized or localized

2. Dot-based:

• A row of dots, where the active slide is highlighted
• Minimalist and common for mobile or visual-first designs

Tip: Slide naming (For example, “Image 1 of 5”) it may be change or be removed depending on the context. For example ‘image 1 of 5’ or ‘1 of 5’.

Using Light and Dark Mode On Slides

When using on slide you may choose between light or dark mode depending on your images.

---

Layout

Carousel may be used as a stand alone component or used inside cards. Note that you shouldn’t put a carousel inside a card that is already in a carousel.

---

Reflow

Carousel works at all break points. Follow the carousel slide content guidelines and grid guidelines to make sure your slide content reflows.