Switcher
Allows to to layout three items next to each other, until there is not enough horizontal space. Will then switch to a column layout.
Link to section titled: Component
Component
Switcher
- html<!-- COMPONENT-START: nc-switcher -->
<div class="nc-switcher">
<div class="example-block"></div>
<div class="example-block"></div>
<div class="example-block"></div>
</div>
<!-- COMPONENT-END: nc-switcher --> Link to section titled: Modifiers
Modifiers
- -tiny
- Sets gap to --spacing-tiny
- -nearest
- Sets gap to --spacing-nearest
- -near
- Sets gap to --spacing-near
- -base
- Sets gap to --spacing-base
- -far
- Sets gap to --spacing-far
- -farthest
- Sets gap to --spacing-farthest
- -nogap
- Sets gap to 0
Link to section titled: CSS Variables
CSS Variables
- --switcher-vertical-alignment
- Sets the vertical alignment of th items. Defaults to
flex-start. - --switcher-target-container-width
- Sets the minimum size of the children before switching to a column layout. Defaults to
40rem. - --switcher-gap
- Set a custom gap between the children