Carousel
A Carousel is a sequence of slides containing a Title, Body Text and an optional image header displayed in a sequence. While the image header is optional, leaving it out can reduce the visual impact but allows for larger blocks of body text when needed.
- Carousels can condense a list of terms and/or concepts into a smaller area.
- Carousels isolate each concept and its explanation or definition, aiding retention.
- Carousels work well when telling a story or detailing a sequence.
- Like Accordions, Carousels work well as an end-of-Page recap.
- Carousels can’t hold much information on each slide. Omitting the header image can help, but reduces the effectiveness of the carousel.
- The content on each carousel should be balanced — Having too much content on a slide will alter the size of all of the slides.
- The effectiveness of the carousel is impacted if the user has to scroll to view the content, then down to the button, then back up, etc.
The Carousel inherits all the settings common to the Presentation Components.
This is a list of the items in the carousel. When you click the Add button, a dialog will slide-out from the right side of the screen allowing you to populate the slide. The fields in this dialog are:
An optional title for the slide.
This is the required body text for each slide.
The alternative text for the graphic, if supplied.
Optional image which will be rendered in the header of the slide.
Used to add a custom HTML/CSS class to the slide. Should only be used with an Advanced theme at the direction of a developer.
The graphics for the Carousel are fairly strict. The headers are height-constrained to keep the slide size consistent. Larger images can be used, however, they will be scaled to just slightly larger than the display area, then cropped. Because of this, it’s important to use images that conform to the sizes specified. Images smaller than the recommended size will be pixelated and should be avoided.
In a card that is full-width (the preferred size), the graphics should be 984px x 262px.
In a card that is half-width, the graphics should be 448px x 262px.
When a full-width carousel is displayed on a mobile device, the header image is resized from the right; This means that content on the right will be cropped. Because of this, it’s important that the subject of the image be left-biased.