Carousel

v2.0

Carousels group similar items into a horizontally scrollable container extending beyond the visible space of the screen.

CSS
Marko
React

Considerations

Consumable

Carousels allow for a list of multiple complex items to be presented in a more consumable format.

Compact

Carousels condense a large list of items into a scrollable container with a smaller vertical footprint.

Consistent

Carousels react consistently and expectedly across all platforms.

Anatomy

Title
Content
Link button
Pagination controls

Properties

Title

Carousels are paired with a section title. The title should be short and summarize the content within the carousel. A “See all” link is appended by default to the title. The link should lead to a page with more related content.

Controls

Pagination controls are always visible on x-large screens. Smaller screens reveal the pagination controls on hover and focus.

Behavior

Title

Carousels use section titles and should summarize the contents in a few words. Titles will wrap to another line if they extend beyond the container width. The “See all” link is anchored to the baseline of the title.

Screen sizes

Small

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 item tile count

Small screens have 1.5–2.5 tiles from 375px to 511px.

Medium

Carousels on medium screens reveal controls when hovering over the bounds of the carousel.

Medium item tile count

Medium screens have 2.5 tiles at 512px, 3.5 tiles at 768px, and 4.5 tiles at 1024px.

Large

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 item tile count

Large screens have 4.5 tiles at 1280px and 4.5 tiles at 1440px.

X-large

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.