Layout
Scroll row
A horizontal-scrolling rail for cards that overflow the viewport — product carousels, equipment rosters, "based on recent purchases" recommendations. Children set their own fixed width and scroll-snap into place; the rail handles overflow, the thin scrollbar, and touch momentum. Used on the homepage (signed-in + signed-out) and any "see a few, scroll for more" section.
Default
Drop any fixed-width children in. They lay out in a row and overflow horizontally — scroll or swipe to reveal the rest.
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
<div class="scroll-row">
<div class="product-card" style="width:220px;">…</div>
<div class="product-card" style="width:220px;">…</div>
<!-- children set their own width; the rail scrolls -->
</div>With product cards
The common pairing: a .product-card rail under a .section-header with a "See all" link.
Based on your recent purchases
Companions to what you've bought.
SKU · PRE-TX-FOAM
Foam pre-filter wrap, pack of 6
SKU · SQG-STRAP-T5
Squeegee retaining strap kit
SKU · DRV-PLT-T5
Brush drive plate, T500e
SKU · BAT-PROT-SPR
Battery terminal protectant
Anatomy
| Slot | Class | Notes |
|---|---|---|
| Rail | .scroll-row | Flex row, overflow-x:auto, x-mandatory scroll-snap, touch momentum, thin scrollbar |
| Children | .scroll-row > * | flex-shrink:0 + scroll-snap-align:start applied automatically. Each child must set its own width (e.g. style="width:220px") |
Tokens consumed
| Property | Token |
|---|---|
| Gap between children | --caster-spacing-4 (16px) |
| Bottom padding (scrollbar clearance) | --caster-spacing-3 (12px) |
| Scrollbar track | --caster-color-surface-subtle |
| Scrollbar thumb | --caster-color-border-default |
Children own their width. The rail doesn't size its children — give each card a fixed width (a
style="width:220px" inline, or a width class) so they keep shape as the row overflows. Without a width, flex children collapse and the rail won't scroll.