layout-reel

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

Attributes

Attribute Values Default Description
data-layout-gap none, xs, s, m, l, xl m Gap between items
data-layout-item-width auto, s, m, l, xl, full auto Fixed width for items (15rem, 20rem, 25rem, 30rem, or 100%)
data-layout-padding none, s, m, l s Padding around the reel
data-layout-scrollbar boolean - Shows a thin scrollbar
data-layout-align start, center, end, stretch stretch Vertical alignment of items
data-scroll-hint boolean or start - Fade edges to hint at scrollable overflow. start fades the end edge only.

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
↑