The Reel acts like a horizontal scroll strip. The items sit in a row, and scroll horizontally rather than wrapping. Useful for things like image galleries or tag strips that shouldn't wrap.
Examples
Item 1
Item 2
Item 3
Item 4
Item 5
<div class="reel">
<div class="docs-box" style="min-inline-size: 12rem">Item 1</div>
<div class="docs-box" style="min-inline-size: 12rem">Item 2</div>
<div class="docs-box" style="min-inline-size: 12rem">Item 3</div>
<div class="docs-box" style="min-inline-size: 12rem">Item 4</div>
<div class="docs-box" style="min-inline-size: 12rem">Item 5</div>
</div>
Reference
Source: src/css/composition.css
Applies to
.reel
Tokens
| Token | Default | Description |
|---|---|---|
--reel-gap | var(--gutter-spacious) | Gap between reel items |
--reel-scrollbar | thin | Scrollbar display style for the reel |
--reel-item-shrink | 0 | Whether reel items can shrink below their basis |
--reel-item-size | auto | Flex basis for reel items |