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
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files
Functional grouping: Marketing and storytelling
Demo
Code
Responsive preview
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.