Cluster
Flow it's children horizontally and spaces it equally. Usually allows wrapping. The horizontal content sibling of the stack.
Link to section titled: Component
Component
Cluster
- html<!-- COMPONENT-START: nc-cluster -->
<div class="nc-cluster">
<div class="example-block"></div>
<div class="example-block"></div>
<div class="example-block"></div>
</div>
<!-- COMPONENT-END: nc-cluster --> Link to section titled: Modifiers
Modifiers
- -inherit
- Inherits the gap spacing of the parent container
- -centered
- Aligns content to the center
- -nowrap
- Prevents wrapping of the children. Will cause overflow if not enough space is available.
- -between
- Spaces the children equally and pushes them to the edges. Useful for navbars, for example.
- -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
- --cluster-gap
- Set a custom gap between the children