Switcher

A component layout that becomes a column once the container is too narrow for the items to be useful side by side. The switch lands at the --switcher-threshold container width, not a media query, so the same markup adapts wherever it is placed. Children are equal-width; uneven layouts need plain flexbox.

The switcher is similar to cluster, but with additional control via the --switcher-threshold token, which lets you control the width below which items stack.

Examples

Pane A

Pane B

Pane C

<div class="switcher" style="--switcher-threshold: 24rem">
        <div class="docs-box">Pane A</div>
        <div class="docs-box">Pane B</div>
        <div class="docs-box">Pane C</div>
    </div>

Tokens: --switcher-threshold (width below which items stack), --switcher-gap, --switcher-align, --switcher-wrap.

Reference

Source: src/css/composition.css

Applies to

.switcher

Tokens

Token	Default	Description
`--switcher-wrap`	`wrap`	Flex wrap behavior for the switcher
`--switcher-gap`	`var(--gutter-spacious)`	Gap between switcher items
`--switcher-align`	`center`	Cross-axis alignment for switcher items
`--switcher-threshold`	`30rem`	Container width at which items switch to column