Carousel
v2.0
Carousels group similar items into a horizontally scrollable container extending beyond the visible space of the screen.
- CSS
- Marko
- React
Carousels group similar items into a horizontally scrollable container extending beyond the visible space of the screen.
Carousels allow for a list of multiple complex items to be presented in a more consumable format.
Carousels condense a large list of items into a scrollable container with a smaller vertical footprint.
Carousels react consistently and expectedly across all platforms.
The title explains why these items are grouped together so users know what they’re browsing before they scroll.
The link button leads to a page with more items from the collection.
"See all" is the default text and works when the carousel title already establishes context. For less obvious destinations, use a more specific label (e.g., Shop running shoes).
Learn more about writing for link buttons.
Pagination controls are always visible on x-large screens. Smaller screens reveal the pagination controls on hover and focus.
If titles extend beyond the container width, titles will wrap to another line.
The text link is anchored to the baseline of the title.
Carousels on small screens don’t have visible controls. Users navigate carousels by using a leftward or rightward swiping gesture. Keyboard and voiceover users tab through the carousel content.
Small screens have 1.5–2.5 tiles from 375px to 511px.
Carousels on medium screens reveal controls when hovering over the bounds of the carousel.
Medium screens have 2.5 tiles at 512px, 3.5 tiles at 768px, and 4.5 tiles at 1024px.
Carousels on large screens will have controls visible on hover. The content can be moved via the controls or by scrolling over the content. Touch-enabled devices can also use swipe gestures.
Large screens have 4.5 tiles at 1280px and 4.5 tiles at 1440px.
Carousels on x-large screens will have the controls visible at all times. The content can be moved via the controls or by scrolling over the content. Touch-enabled devices can also use swipe gestures.
X-large screens have 5 tiles at 1680px and above and have no visual cut on the right side.
Do include a title on each carousel.
Don’t stack carousels under a single title.
Small screen
Medium, large, and x-large screen. Controls are vertically centered on the image only.