Similar to Banners, Carousels are a component that score highly in the visual hierarchy, used to convey multiple messages to the user or provide quick access to their respective page. They typically consist of an image, with heading, additional information and CTA as well as the item indicators and controls.
The 4 variants are designed with the user experience and accessibility in mind, controlling for various degrees of image exposure and and text-to-image contrast ratio. The sizes cover multiple aspect ratios, specifically 3:1 (large), 4:1 (medium) and 5:1 (small).
Do's
- ensure that the size follows the aspect ratio of 3:1 (large), 4:1 (medium) and 5:1 (small)
- ensure that the component is optimised for different devices
- use and indicate appropriate file formats (jpg, png), if restrictions are applied
- keep in mind the file size as it may affect page loading time
- indicate file size if restrictions are applied
- use indicated HTML tags and attributes
Don'ts
- do not use a size that is larger than the allotted space
- do not use a size that is not in the correct aspect ratio
- do not use an inappropriate file format (e.g. gif, tiff)
- do not use an incorrect file size
When to use
- when you have multiple topics which are given high importance
- use on homepage or landing pages to increase the visual hierarchy of a message or page
- use on pages that are high in the information architecture (usually parent pages) to highlight topics and link to related pages
When not to use
- do not use on pages presenting specific content which require a permanent title or have no need for additional content, use Page header with background image variant instead