Content Carousel - Stack


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. This displays in a stack differently than the traditional content carousel.

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, minimum of three  NA
Slide - Image Field Type: Image
Aspect Ratio: 4:3
Optimal Image Dimensions: 855x641
Slide - Title Field type: Single line text
Text: H2
Character Recommendation: 30
Wrapping: Wrap to two lines 
Slide – Text Field type: Multi line text
Text: Paragraph
Character Recommendation: 160
Wrapping: Wraps to multiple lines  
Slide – Button
Link URL
Field type: Button
Character Recommendation: 25
Wrapping: Single line
Hover: Orange outline
closes and background
changes to grey
Animation As user navigations to various slides, the image stack
will flip like a stack of photos. The stack will loop. 
Navigation Interaction: The arrows that are to the right and below will allow the user to flip through the carousel on desktop, tablet, laptop and mobile view. Change mobile will use same arrows instead of dots, reported in UAT.
Hover: Background is dark grey, arrow is light grey
Mobile: the round bullets are grey and turn blue for the
image the user is viewing.
Mobile Response Users will be able to swipe to view additional cards.
Uses same navigation arrows as desktop/tablet.
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.

How to Use

Pull the required components from the example link or look for the content block/type in T4 or Wordpress with the same name. Refer to training documentation for step by step usage guidelines in Wordpress. In T4 make sure to include Stacked Content Carousel Wrapper START/END and Stacked Content Carousel Item (Mercury).

Accessibility Tips

The content carousel can be navigated using keyboard controls. Make sure to provide clear and descriptive slide titles and labels for screen readers.