Carousels - Canada.ca design pattern

Responsive carousels are in-page components used to display multiple different items within the same content space.

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

Example

Carousels pattern
Screenshot illustrating the full-width carousel pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
Date modified: