A responsive layout pattern that helps switching the orientation from horizontal to vertical if the available width for the targeted (wrapper) element becomes less than the set width. Useful when the targeted element has >= 2 child elements.


<div class="switcher --threshold-{z}">
Implementation tip! When you apply the switcher pattern to the "fixed" content of sidebar pattern, you can get an impressive layout. On larger available width, the content in the "fixed" sidebar has a vertical orientation. Once the available width decreases, the sidebar transforms into a vertical alignment. But the switcher does the opposite, as it now has more available width. To achieve this, ensure the --threshold-{z} class utility of the switcher has a z+1 compared to the sidebar.


Custom propertyDefaultDescription
--layout-threshold0Sets the threshold when the targeted element switches orientation
--layout-gap0Sets the gap of the targeted element
--layout-directionrowSets the flex-direction of the targeted element

Utility classes

Class nameRequired?Description
--threshold-{z}RequiredControls the --layout-threshold API
--gap-{z}Controls the --layout-threshold API
--column/--rowControls the --layout-direction API