Everything
About Row
Row is a small-flexbox-group layout for 2–3 related items (button + link, icon + text). It does not wrap. When contents exceed the available width, Row always scrolls horizontally; Show arrows adds optional chevron controls over the scroll track.
Code model. Every Row renders as a row-track wrapping a row-group. The track stretches to parent width, establishes a container-query context, and clips. The row-group is flex-row/flex-nowrap with overflow-x auto. With Full width off, the row-group is content-width and positioned by the section's content-align. With Full width on, the row-group fills the track and Placement distributes children.
Honest dependencies.
- Placement and Distribute only appear when Full width is on — a content-width row has no free space to distribute.
- Show arrows only appears when Full width is on — arrows are meaningless on a non-constrained row.
- Under Stack when small, Placement start/center/end translate to align-items (horizontal position within the column). Spread has no clean column equivalent — falls back to center.
- Overflow always scrolls. Show arrows only toggles the chevron UI; the scroll is always on.
- Nested rows: the inner row's container-query measures the outer width (CSS anti-recursion rule). An inner breakpoint fires based on the outermost row-track's width.
spread: between
spread: around
spread: evenly
Stacks only on very narrow viewports (< 400px). Stays horizontal on mobile and up.
Classic mobile stack. Horizontal on tablet/desktop, stacks below 760px.
Always stacks below 1000px — effectively column on most tablets/desktops narrower than this.
full_width + placement: start + stack @ 760. At desktop: items push left. Stacked: items still align left (align-items: flex-start).
placement: center — horizontal and stacked both centered
placement: end — right-aligned horizontally AND stacked (align-items: flex-end)
Outer stacks @ 760, inner rows stack @ 500 — but inner query the OUTER width (CSS anti-recursion). So inner effectively also uses the outer container.
Row stacks @ 600 inside a 400px frame → stacks regardless of viewport.
Same row stacks @ 600 but inside a 900px frame → horizontal.
Full width, 6 buttons, show_arrows OFF. Overflow still scrolls horizontally (trackpad/touch) — no silent spill.
Same row as #11 but with chevron controls + edge-mask. Arrows fade in/out based on scroll position; hide entirely when content fits.
Arrows on desktop, stacks (and hides arrows) below 760px.
Frame children honor literal width — 60% + 50% + 50% = 160% overflows the row. Scrolls horizontally (overflow always on). Turn on Show arrows for manual control.
60%
50%
50%
Frames at 60/50/50 with set_stack @ 600. Stacked: items content-width (placement translates to align-items). Unlike V1, children no longer forced to 100%.
60%
50%
50%
Icon + text + link + button — heights differ; vertically centered via items-content-gravity.
Ships in 1-2 business days
set_text_alignment + left
Two lines of rich text showing the alignment applied through the row's content-align variable.
center
Two lines of rich text showing the alignment applied through the row's content-align variable.
right
Two lines of rich text showing the alignment applied through the row's content-align variable.
Decoration / text / decoration — spread:between so decorations flank the title; stacks at 760.
FEATURED COLLECTION
Children with long, unbreakable text force the row wider than its container. Scrolls (no silent spill) — but may require a manual word break on merchant copy to look clean.
A very long product name Lorem-ipsum-dolor-sit-amet-consectetur
Another long descriptor without-break-points-here
Stacked-layout callouts with + without body text. Row has items-content-gravity (vertical center) but no grid alignment — mixed content heights stagger top/bottom. Fix by standardizing on body-or-no-body, or use a grid block instead.
Free shipping
On orders over $50 across the continental US.
Easy returns
24/7 support
Real humans answering the phone, email, and chat round the clock.
6 stacked callouts with full bodies + show_arrows. Overflow scroll works, but tall content makes the horizontal-scroll affordance feel heavy — users don't expect feature blocks to scroll sideways. Consider Grid or Card-slider instead for this count/density.
Quality
Every piece is inspected by hand before it ships.
Responsibility
Sourced from certified suppliers with transparent labor.
Community
1% of every sale goes to local maker collectives.
Longevity
Designed to last decades, not seasons. Free repairs for life.
Transparency
Every cost line published — know exactly where your money goes.
Delivery
Carbon-neutral shipping, tracked from warehouse to doorstep.