Layout
The .switcher layout arranges items horizontally until its container becomes too narrow, then stacks them vertically.
Use it for responsive groups such as cards, pricing blocks, and feature lists, especially when the number of items varies.
class="switcher" to the container element.--switcher-breakpoint to control the width at which the layout changes. The default breakpoint is 68ch.--gap to adjust spacing and --switcher-vertical-alignment to align items vertically.For simple projects.
For growing teams.
For large organizations.
Tokens and components.
Layouts and utilities.
Docs and production bundle.
Patterns for teams.