cu.css

Switcher

Switcher can be used to switch directly between a horizontal and vertical layout.

Useful where each item should be considered equal to one another. For example, when displaying content in a number list of steps or showing product benefits.

To create a Switcher, add the .switcher class to a parent element containing any number of child elements.

Switcher will display up to 4 items next to each other while horizontal space permits.

Item 1
Item 2
Item 3
Item 4
Switcher display up to 4 items next to each other while horizontal space permits.

With more than 4 items, switcher will stack all items vertically.

Item 1
Item 2
Item 3
Item 4
Item 5
With more than 4 items, switcher will stack all items vertically.

Use --switcher-target-container-width to define how wide the container needs to be for items to sit inline.

Control the space between each item by setting a value for --gutter.

Set how items should align vertically using --switcher-vertical-alignment with any flexbox alignment value.