Carousel scrolls a row of items horizontally when they overflow the available width. Use it for card grids, image galleries, product lists, or any set of items that should be browsable without taking up the full page.
ts
| Guidance | Practices |
|---|---|
| Do | Enable scroll-snap when each item should land precisely at the start edge, like a gallery or product list. |
| Do | Always provide an aria-label that describes what the carousel contains, like "Featured products" or "Team members". |
| Do | Use a consistent gap and item width so the carousel looks intentional, not like content overflowing by accident. |
| Don't | Use a carousel for content every user must see. Not everyone scrolls horizontally, so put critical content above the fold. |
| Don't | Auto-advance items. Let the user scroll at their own pace. |
| Don't | Nest carousels. A carousel inside a carousel is confusing and breaks keyboard navigation. |
A horizontally scrollable row of cards with snap scrolling enabled. Use for feature grids, product lists, or any set of cards that overflows the available width. The carousel adds fade edges and navigation buttons automatically.
Scroll-snap carousel with navigation buttons and team member cards. Each card snaps to the start edge on scroll. Use when items should be viewed one at a time rather than as a continuous strip.