A simple layout pattern that makes two elements of equal width next to eachother, until a threshold is met. When the available space is lower than the threshold, items are positioned below eachother. Can be used with more than 2 items, but does not act the same as the switcher, as items just wrap.


<div class="fifty --threshold-{z}">


Custom propertyDefaultDescription
--layout-threshold0Sets the max-width of the child elements
--layout-gap0Sets the gap of the targeted element

Utility classes

Class nameRequired?Description
--threshold-{z}RequiredControls the --layout-threshold API
--gap-{z}Controls the --layout-gap API