Skip to main content

Carousels

Carousels are featured areas of content that cycle through either by auto-rotation or manual rotation. CANVAS supports two different types of carousels: Feature Carousels and Related Content Carousels.

Feature Carousel

Feature carousels contain up to four feature content panels that auto-rotate by default on a timely basis. Each feature content panel within the feature carousel will should match in height. If a feature carousel contains two or more feature content panels, pagination dots and arrows will be displayed. When a feature carousel contains only a single feature content panel, these pagination elements will be hidden and the content beneath the carousel will shift upward to fill the additional space.  

Content Panels

Feature content panels make up a feature carousel.  Each feature content panel must have a headline and call-to-action. Background imagery, descriptive copy, and video embedding are optional.

Background Imagery

Images that exceed the width of the feature carousel should be exported with gradient edges that match the background color of the site. If no background image is present, the carousel background defaults to the color constant “Container Background.”

Panel Layouts

As displayed below, content within a panel can be formatted in one of five layouts. Brands can select any combination of formats to display content within a single feature carousel.  A feature content panel containing an embedded video must make use of the Split Right or Split Left layouts. 

 

 

 

Related Content

Related content carousels display teaser information for products, articles, videos, images, and audio files that are relevant to other page content. They must contain at least one content item, and each item should have a thumbnail image and teaser title.

Formats

If there are more than four product items in the carousel, pagination dots and arrows must be visible. Carousels with four or less items must hide pagination and product spacing should be increased. 

 

 

 

 

 

 

See examples of page layouts, features and functionality in CANVAS.

Our demo provides a glimpse of the flexibility of CANVAS and its templates.