Scroll
The Scroll layout creates horizontal scrolling containers with optional snap behavior. This component is designed for creating smooth horizontal scrolling experiences with touch-friendly behavior, perfect for image carousels, card sequences, or any content that needs to scroll horizontally while maintaining usability across different devices.
Example
<div class="scroll --snappable --center">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>Custom Properties
| Property | Default | Description |
|---|---|---|
--layout-items |
center |
Snap alignment for children when using --snappable modifier |
Class Utilities
| Class | Description |
|---|---|
.--snappable |
Enables scroll snap with mandatory snapping to each child |
.--start, .--end, .--center, .--stretch |
Controls snap alignment when using the --snappable modifier |