Skip to main contenteBay Playbook

Carousel

2.0.1

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

Stylized graphic of a carousel.

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

Anatomy of a carousel. Number 1 points to the title. Number 2 points to the main content. Number 3 points to the link button. Number 4 points to the pagination controls.
  1. Title
  2. Content
  3. Link button
  4. 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.

A small screen carousel of shoes with the title “Recently viewed items”.

Controls

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

A small screen carousel with a cursor that triggers the pagination controls and a large screen carousel with the pagination controls always present.

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.

A carousel title that wraps to two lines. The “See all” link is aligned with the baseline of the second line in 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.

A small screen carousel for recently viewed items.

Small item tile count

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

Two small screen carousels. The first is 375px with 1.5 tiles. The second is 511px with 2.5 tiles.

Medium

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

A medium screen carousel for recently viewed items. A cursor hovers over the carousel and reveals the pagination controls.

Medium item tile count

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

Three small screen carousels. The first is 512px with 2.5 tiles. The second is 768px with 3.5 tiles. The third is 1024px with 4.5 tiles.

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.

A large screen carousel for recently viewed items. A cursor hovers over the carousel and reveals the pagination controls.

Large item tile count

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

Two large screen carousels. The first is 1280px with 4.5 tiles. The second is 1440px with 4.5 tiles.

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.

An x-large screen carousel for recently viewed items. Pagination controls are visible without a cursor hover.

X-large item tile count

X-large screens have 5 tiles at 1680px and above and have no visual cut on the right side.

Two x-large screen carousels. The first is 1680px with 5 tiles. The second is 1920px with 5 tiles.

Best practices

Stacking

Do include a title on each carousel.

Two carousels stacked on a mobile screen. Each carousel has a title.

Don’t stack carousels under a single title.

Two carousels stacked on a mobile screen. Only the top has a title.

Specs

Specs for a small screen carousel. There is 16px between the title and content, 8px between item tiles, and 12px between item tile images and pricing.

Small screen

Specs for a medium, large, and x-large screen carousels. There is 24px between the title and content, 16px between item tiles, and 12px between item tile images and pricing. The pagination controls are 32px tall and vertically aligned with the image.

Medium, large, and x-large screen. Controls are vertically centered on the image only.

Change log

VersionDateNotes
2.0.1
Aug, 2024
  • Added “Item tile count” sections to each screen size
  • Updated specs for medium and large carousels
  • Updated to eBay Evo
2.0.1
Oct, 2023
  • Fixed spacing issues
2.0.0
Oct, 2022
  • Updated control location
  • Updated component composition
  • Simplified to three sizes
  • Updated to use new item tile component
  • Updated to use new section title component
1.1.0
Sep, 2019
  • Initial publish