Webmail

Carousel

A slideshow component for cycling through images and videos.
 

Table of contents:

Behaviour

The carousel is a component for displaying a group of content in a limited area of the interface. It can only display images or videos.

Configuration

It is possible to configure the amount of cards per viewport and the option of a pagination.

Amount of cards

Per viewpoint you can choose how many items will be shown on first view. You can make a different choice on mobile, tablet and desktop.

  • 1 cards with 12 column width
  • 2 cards with 6 column width
  • 3 cards with 4 column width
  • 4 cards with 3 column width
  • 6 cards with 2 column width

Optional Pagination

For large amounts of content, you can choose to show pagination.

Themes

Best practices

Do!

Only use 1 component type within a carrousel.

Do!

Maintain a consistent size for each slide in the carousel. This helps in creating a visually cohesive design and prevents jarring transitions between slides of different dimensions.

Do!

Provide alternative text for images within the carousel.

Don't!

Avoid placing critical information exclusively within the carousel, as some users may not interact with it. Important content should be accessible elsewhere on the page.

Don't!

Avoid large images or complex animations. This can impact the loading time.