Vanilla Breeze

layout-reel

Horizontal scrolling container with snap points. Perfect for carousels, image galleries, and card sliders.

Attributes

Attribute Values Default Description
data-layout-scrollbar (boolean) — Show a thin scrollbar (hidden by default).
data-layout-gap none, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl m Gap between items, on the shared size scale.
data-layout-padding none, s, m, l s Inline padding and scroll padding.
data-layout-item-width auto, s, m, l, xl, full auto Item width: auto (content), s / m / l / xl tokens, or full (100%).
data-layout-align start, center, end, stretch stretch Cross-axis alignment of items.
data-scroll-hint (bare), start — Fade both edges to hint at overflow; start fades only the end edge.
data-container (on main, article, section, aside) (boolean) — Opt a semantic child back into container queries (the reel removes container-type from such children so they size to content).

Basic Usage

Items scroll horizontally with scroll snap for smooth navigation.

Item Width Variants

The data-layout-item-width attribute sets consistent widths for all items.

Scroll Hints

Add data-scroll-hint to fade the edges of the reel, signaling there is more content to scroll. Use data-scroll-hint="start" to only fade the end edge (useful when content starts fully visible). The fade size can be customized with --scroll-hint-size.

Scrollbar Visibility

By default the scrollbar is hidden. Add data-layout-scrollbar to show it.

Gap Variants

The data-layout-gap attribute controls spacing between items.

Usage Examples

Image Gallery

Product Carousel

Testimonials

Team Members

Accessibility

The reel component respects prefers-reduced-motion by disabling scroll snap for users who prefer reduced motion.

Related
↑