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 |
Basic Usage
Items scroll horizontally with scroll snap for smooth navigation.
Item 1
Scroll horizontally to see more items
Item 2
Each item snaps into place
Item 3
Works great on touch devices
Item 4
No JavaScript required
Item 5
CSS scroll-snap handles positioning
Code
<layout-reel data-layout-gap="m" data-layout-item-width="m">
<layout-card>Item 1</layout-card>
<layout-card>Item 2</layout-card>
<layout-card>Item 3</layout-card>
<layout-card>Item 4</layout-card>
<layout-card>Item 5</layout-card>
</layout-reel>
Item Width Variants
The data-layout-item-width attribute sets consistent widths for all items.
data-layout-item-width="s" (15rem)
Small 1
Small 2
Small 3
Small 4
Small 5
data-layout-item-width="l" (25rem)
Large Item 1
Large Item 2
Large Item 3
Large Item 4
data-layout-item-width="full" (100% - one at a time carousel)
Slide 1
Full-width slides for carousel effect
Slide 2
Scroll or swipe to navigate
Slide 3
Snaps to center with scroll-snap-align
Code
<!-- Small items (15rem) -->
<layout-reel data-layout-gap="s" data-layout-item-width="s">...</layout-reel>
<!-- Medium items (20rem) -->
<layout-reel data-layout-gap="m" data-layout-item-width="m">...</layout-reel>
<!-- Large items (25rem) -->
<layout-reel data-layout-gap="m" data-layout-item-width="l">...</layout-reel>
<!-- Full-width (one at a time carousel) -->
<layout-reel data-layout-gap="m" data-layout-item-width="full">...</layout-reel>
Scrollbar Visibility
By default the scrollbar is hidden. Add data-layout-scrollbar to show it.
With scrollbar
Item 1
Item 2
Item 3
Item 4
Item 5
Code
<layout-reel data-layout-gap="m" data-layout-item-width="m" data-layout-scrollbar>
<!-- Items -->
</layout-reel>
Gap Variants
The data-layout-gap attribute controls spacing between items.
data-layout-gap="xs"
1
2
3
4
5
data-layout-gap="xl"
1
2
3
4
5
Usage Examples
Image Gallery
<layout-reel data-layout-gap="m" data-layout-item-width="m" data-layout-scrollbar>
<div data-media data-layout-ratio="4:3" data-radius="m" style="inline-size: 20rem;">
<img src="image1.jpg" alt="Gallery 1" loading="lazy" />
</div>
<div data-media data-layout-ratio="4:3" data-radius="m" style="inline-size: 20rem;">
<img src="image2.jpg" alt="Gallery 2" loading="lazy" />
</div>
<!-- More images... -->
</layout-reel>
Product Carousel
Product Name
$29.99
Product Name
$34.99
Product Name
$24.99
Product Name
$44.99
<layout-reel data-layout-gap="m" data-layout-item-width="m">
<layout-card data-variant="outlined">
<layout-stack data-layout-gap="s">
<div data-media data-layout-ratio="1:1" data-radius="s">
<img src="product.jpg" alt="Product" loading="lazy" />
</div>
<strong>Product Name</strong>
<span>$29.99</span>
</layout-stack>
</layout-card>
<!-- More products... -->
</layout-reel>
Testimonials
"This product has completely transformed how we work. Highly recommended!"
Jane Smith
CEO, TechCorp
"The best investment we've made this year. Outstanding quality and support."
John Doe
Designer, Creative Co
"Simple, elegant, and powerful. Exactly what we were looking for."
Sarah Johnson
Developer, StartupXYZ
<layout-reel data-layout-gap="l" data-layout-item-width="l">
<layout-card data-variant="elevated" data-padding="l">
<layout-stack data-layout-gap="m">
<p style="font-style: italic;">"Great product!"</p>
<layout-cluster data-layout-gap="s">
<user-avatar>
<img src="avatar.jpg" alt="Avatar" />
</user-avatar>
<layout-stack data-layout-gap="xs">
<strong>Jane Smith</strong>
<small>CEO, TechCorp</small>
</layout-stack>
</layout-cluster>
</layout-stack>
</layout-card>
<!-- More testimonials... -->
</layout-reel>
Team Members
Alice Williams
Engineering Lead
Bob Chen
Product Manager
Carol Davis
Design Director
David Evans
Marketing Lead
Accessibility
The reel component respects prefers-reduced-motion by disabling scroll snap for users who prefer reduced motion.
@media (prefers-reduced-motion: reduce) {
layout-reel {
scroll-snap-type: none;
}
}
CSS Implementation
layout-reel {
display: flex;
overflow-x: auto;
overflow-y: hidden;
gap: var(--_gap, var(--size-m));
padding: var(--_padding, var(--size-s));
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--_padding, var(--size-s));
-webkit-overflow-scrolling: touch;
/* Hide scrollbar by default */
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
}
/* Show scrollbar variant */
layout-reel[data-layout-scrollbar] {
scrollbar-width: thin;
scrollbar-color: var(--color-gray-400) transparent;
&::-webkit-scrollbar {
display: block;
block-size: 8px;
}
&::-webkit-scrollbar-thumb {
background: var(--color-gray-400);
border-radius: var(--radius-full);
}
}
/* Gap variants */
layout-reel[data-layout-gap="none"] { --_gap: 0; }
layout-reel[data-layout-gap="xs"] { --_gap: var(--size-xs); }
layout-reel[data-layout-gap="s"] { --_gap: var(--size-s); }
layout-reel[data-layout-gap="m"] { --_gap: var(--size-m); }
layout-reel[data-layout-gap="l"] { --_gap: var(--size-l); }
layout-reel[data-layout-gap="xl"] { --_gap: var(--size-xl); }
/* Children in reel */
layout-reel > * {
flex-shrink: 0;
scroll-snap-align: start;
}
/* Item width variants */
layout-reel[data-layout-item-width="auto"] > * { inline-size: auto; }
layout-reel[data-layout-item-width="s"] > * { inline-size: 15rem; }
layout-reel[data-layout-item-width="m"] > * { inline-size: 20rem; }
layout-reel[data-layout-item-width="l"] > * { inline-size: 25rem; }
layout-reel[data-layout-item-width="xl"] > * { inline-size: 30rem; }
/* Full-width items (one at a time) */
layout-reel[data-layout-item-width="full"] > * {
inline-size: 100%;
scroll-snap-align: center;
}