Switcher
The Switcher layout creates a multi-column layout that switches from horizontal to vertical when children become too narrow. This component uses a clever flexbox technique to automatically wrap based on child element minimum width, making it perfect for responsive card layouts, form sections, or any content that needs to gracefully transition between horizontal and vertical arrangements based on available space.
Example
<div class="switcher --gap-2 --threshold-3">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>Custom Properties
| Property | Default | Description |
|---|---|---|
--layout-direction |
row |
Flex direction |
--layout-gap |
0 |
Gap between child elements |
--layout-items |
stretch |
Align items on cross axis |
--layout-justify |
start |
Justify content on main axis |
--layout-threshold |
0 |
Minimum width of each child element before wrapping |
Class Utilities
| Class | Description |
|---|---|
.--gap-* |
Controls spacing between items using Feo.css design tokens for size |
.--column, .--row |
Controls the flex direction |
.--start, .--end, .--center, .--stretch |
Controls cross-axis alignment of items |
.--justify-* |
Controls main-axis distribution of items (start, end, center, between, around) |
.--threshold-* |
Controls the minimum width threshold using Feo.css design tokens for breakpoints |
.--no-grow |
Prevents children from growing, centers them instead |
.counted |
Works with .counted utility to calculate threshold based on child count |