Carousel content block

The Carousel Content Block is a horizontally scrollable set of content panels or cards. It allows users to browse a collection of related content, such as featured stories, program highlights, or promotional materials, one piece at a time without leaving the page.

Carousels should enhance discovery, not hide important content, and must be used strategically to avoid overwhelming or confusing users.

Usage Recommendations

Best Used On:

  • Campaign pages promoting multiple programs.
  • Department highlights, success stories, or community initiatives.
  • Landing pages where space is limited but content is related.

 

Limit Usage To:

  • One carousel per page to reduce cognitive load and scrolling fatigue.
  • Non-critical content that enhances but does not replace the core message.

 

Card Content Tips:

  • Use a consistent structure (Image + Heading + CTA).
  • Avoid walls of text; keep descriptions short and link out for more.

 


Component data

Component resources:
SCSS files

Functional grouping: Marketing and storytelling

Demo


Do

  • Use for visual storytelling or highlighting multiple campaign items (e.g., featured programs, event cards).
  • Display 3–5 items maximum per carousel to avoid fatigue.
  • Make it keyboard navigable and screen reader friendly.
  • Ensure that important info is visible without interaction (e.g., first card clearly shows context).
  • Include clear navigation controls (e.g., previous/next buttons, pagination dots).
  • Pause auto-rotation by default (especially for accessibility compliance).
  • Label content clearly (e.g., headlines, images with alt text).

Don't

  • Don’t use for critical content or anything users must see to complete a task.
  • Don’t auto-play or auto-rotate without user control.
  • Don’t bury important messages in later slides—users may never reach them.
  • Don’t make navigation depend solely on swipe or mouse (must support keyboard/focus).
  • Don’t use it in mobile-heavy contexts without testing swipe + responsive behavior.