Ripple Design System


The Carousel component is a set of related cards that users can side-scroll through.


Use a carousel to let users browse through a set of up to 9 cards with pagination controls.

The content in the carousel should be related in some way. This helps users to find related and relevant content.

When and how to use

  • Use a combination of promotion cards.
  • Use when wanting to display a collection of cards with related content.
  • Add to any page type.
  • Include with an accompanying title to give context to users.

When and how not to use

  • Don’t use more than 9 cards or fewer than 3.
  • Don't use with navigation or other card types.


The carousel adopts its theming from the card and pagination components.

To create your own theme see theming guidance for designers or theming guidance for developers.