Skip to content

Carousel

A carousel with motion and swipe built using Embla.

Default

1

2

3

4

5

Usage notes

Use for focusable, swipeable content blocks.
Keep nav buttons outside the content area.
Match card backgrounds to the page.

Sizes

1

2

3

4

5

Usage notes

Use basis utilities to show multiple slides.
Keep widths consistent across items.
Prefer 2-3 visible items for balance.

Spacing

1

2

3

4

5

Usage notes

Adjust spacing with padding and negative margin.
Use responsive spacing to scale on larger screens.
Combine with basis utilities for multi-item views.

Orientation

1

2

3

4

5

Usage notes

Use vertical carousels for stacked content.
Set a fixed height so slides have room.
Keep controls aligned to the axis.