Content Carousel


The Content Carousel component is a carousel slider that displays multiple slides with text content and background images. Each slide includes a heading, description, and a button for users to explore more. The component provides a visually engaging way to present key information or highlight featured content.

On-page Example

To preview a live example of the component or inspect the code, click the link below

Content Carousel Stack Example 

Component Specifications

Item/Field Description Required/Optional
Slide Number: Up to 10, if only one slide is added no
navigation controls will display
Slide - Image Field Type: Image
Aspect Ratio: 2:1
Optimal Image Dimensions: 1920x960
Slide - Title Field type: Single line text
Text: H2
Character Recommendation: 30
Wrapping: Single line
Slide - Description Field type: Multi line text
Text: Paragraph
Character Recommendation: 300
Wrapping: Wraps to multiple lines
Slide - Button
Link Label
Link URL
Field type: Button
Character Recommendation: 30
Wrapping: Single line
Hover: Box closes
Animation As user navigations to various slides, the orange bars
at the bottom right will raise and become bold,
signifying the image it’s on 

Interaction: Users may use the left/right arrows or
the pagination lines at the bottom right of the slide to
change slider. Active for the pagination will change
the line to a thicker bar and raise it to correspond
with the slide number
Movement: If the right arrow button is pressed the
image will slide in form the left. If the left arrow is
pressed the image will slide in from the right.
Hover: Hover on arrows will change them to orange
with line around them

Mobile Response Users will be able to swipe to view additional slides.
Pagination portion of the feature will not display.
Page Placement Full width NA
Accessibility Slide navigation arrows and slide buttons are
included in the tab through.

When to Use

  • To showcase multiple pieces of content in a visually appealing and interactive way.
  • To highlight featured information, promotions, or key messages.
  • To engage users and encourage them to explore more by providing buttons for further actions.

When to Consider Something Else

  • If you have a large amount of content to display, consider using a different layout or pagination mechanism to improve user experience.
  • If your content requires complex interactions or functionality beyond basic sliding, consider using a more advanced carousel library or building a custom solution.

Accessibility Tips

  • Ensure that all images have appropriate alternative text ("alt" attribute) for screen readers.
  • Use semantic HTML elements and proper heading hierarchy to provide structure and accessibility to the component.
  • Test the component with keyboard navigation to ensure that users can access and navigate through the carousel using the tab key.

Commonly Used

Image & Video Content