Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
layout-switcher
A flexbox container that automatically switches from horizontal to vertical layout based on available space. Ideal for responsive layouts without media queries.
Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
data-layout-gap |
none, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl |
m |
Gap between items, on the shared size scale. |
data-layout-threshold |
(bare), s, m, l |
m |
Container width at which the row becomes a column: 25 / 30 / 40rem. One-off: style="--layout-threshold: 35rem". |
data-layout-limit |
2, 3, 4 |
— | Force the column layout once there are more than this many items. |
data-layout-reverse |
(boolean) | — | Reverse the visual order when stacked. |
Basic Usage
Items display side-by-side when space allows, then stack vertically.
Basic layout-switcher usage
<layout-switcher data-layout-gap="m"> <div>Item 1</div> <div>Item 2</div></layout-switcher>Threshold Variants
The data-layout-threshold attribute controls when the switch happens.
Threshold variants
<!-- Lower threshold - stays horizontal longer --><layout-switcher data-layout-threshold="s"> <div>Card A</div> <div>Card B</div></layout-switcher> <!-- Higher threshold - stacks earlier --><layout-switcher data-layout-threshold="l"> <div>Card A</div> <div>Card B</div></layout-switcher>Item Limit
The data-layout-limit attribute forces vertical layout when there are more items than the limit.
Item limit forcing vertical layout
<!-- Forces vertical when more than 2 items --><layout-switcher data-layout-gap="m" data-layout-limit="2"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <!-- This causes stack --></layout-switcher>Usage Examples
Form Actions
Form action buttons
<layout-switcher data-layout-gap="s" data-layout-threshold="s"> <button type="button" class="secondary">Cancel</button> <button type="submit">Save Changes</button></layout-switcher>Card Header
Card with header switcher
<layout-card data-variant="outlined" data-padding="m"> <layout-switcher data-layout-gap="m" data-layout-threshold="m"> <layout-stack data-layout-gap="xs"> <strong>Project Name</strong> <p>Last updated 2 hours ago</p> </layout-stack> <layout-cluster data-layout-gap="s"> <button type="button" class="small secondary">Edit</button> <button type="button" class="small">View</button> </layout-cluster> </layout-switcher></layout-card>Feature Comparison
Pricing comparison cards
<layout-switcher data-layout-gap="l" data-layout-threshold="l"> <layout-card data-variant="outlined" data-padding="l"> <layout-stack data-layout-gap="m" data-layout-align="center"> <strong>Basic</strong> <span>$9/mo</span> <button type="button" class="secondary">Choose Basic</button> </layout-stack> </layout-card> <layout-card data-variant="elevated" data-padding="l"> <layout-stack data-layout-gap="m" data-layout-align="center"> <strong>Pro</strong> <span>$29/mo</span> <button type="button">Choose Pro</button> </layout-stack> </layout-card></layout-switcher>Related
<layout-sidebar>— Two-column layout with sidebar<layout-grid>— Auto-fit grid layout<layout-cluster>— Horizontal grouping with wrapping