Similar to Banners, Carousels are a component that have high visibility on the page. You can use them to convey multiple messages to the visitor and/or provide quick access to a related page. Use only as presentation tools, not as primary navigation.
Carousels typically consist of an image (copyright optional), heading, additional information and call to action (CTA), together with individual item indicators and controls. Available sizes and configurations cover the full range of options available in the Banner component.
Do's
- ensure that the image size follows the corresponding aspect ratio - otherwise vertical or horizontal cropping may occur
- ensure content is optimised for different devices
- maintain consistent content structure within a single carousel, whenever possible, to reduce cognitive load during browsing
- use and indicate appropriate file sizes and formats (jpg, png), if restrictions are applied
- keep in mind the file size - it can affect page loading time
- provide visible, accessible buttons
Don'ts
- do not use carousels for critical user tasks or essential information that users need to find quickly or reliably
- do not continue auto-rotation when the carousel has mouseover, keyboard focus or when assistive technology is active
- do not hide navigation controls or assume users will discover swipe gestures
When to use
- use on homepage or landing pages to increase the visual prominence of a message or page that sits lower in the information architecture
- use when there is a need feature multiple promotional items, campaign messages, or highlights within limited screen space, and when no single item demands exclusive attention
When not to use
- given the auto-rotating feature built into Carousels, avoid using them for critical or time-sensitive information (e.g. live updates, urgent announcements, critical deadlines) - there is a high risk that users miss content before scrolling past it. Use static navigation components with images (i.e. Cards, Content items) or Notifications instead
- do not use on pages presenting specific content which require a permanent title. Use Banners or Page header with background image instead