Carousels design pattern: Canada.ca design

When to use this pattern

Use this component for situations such as image or video galleries.

What to avoid

Don't use this component:

• to promote activities and initiatives
• when a person’s flow must not be interrupted, as in a transactional process
• when it would duplicate content from other components on the page

How to use this pattern

• Responsive carousels are a set of 2 to 4 rotating slides that refresh on page load, with user-controls to rotate through the slides and to toggle to auto-rotation
• The default controls for stepping through the slides are thumbnails for large screens and forward/back buttons, including an “Item X of X” message for small screens
• When auto-play is activated, the default slide for the start of auto-rotation is slide one
• The default timing for auto-rotation is 9 seconds per slide
• The default style for transitioning between slides is horizontal sliding transition, starting from the right edge
• Carousels may be implemented at various sizes, ranging from a single column to the full width of the screen
• Each slide is made up of a combination of text and imagery, with the option to add a button link
• Both text and imagery must be linked, but all links in the carousel slide must point to the same destination
• Any call to action must be described in the hyperlink text or button link
• A maximum of 65 characters is allowed for all of the text on a carousel slide (including link label)
• Textual elements must be coded as HTML text—do not embed text into imagery
• Use the defined presentation classes included in the Canada.ca WET theme
• For image sizing details, consult the Canada.ca GitHub page

Latest changes

2020-10-30: clarified when to use carousels and when not to use them

Working example

• WET: Carousels – use style 2