Stack
Stack content vertically in a column and space it equally. Since most websites are built this way, it's basic building block.
Link to section titled: Component
Component
Stack
- html<!-- COMPONENT-START: nc-stack -->
<div class="nc-stack">
<div class="example-block"></div>
<div class="example-block"></div>
<div class="example-block"></div>
</div>
<!-- COMPONENT-END: nc-stack --> Link to section titled: Modifiers
Modifiers
- -inherit
- Inherits the gap spacing of the parent container
- -stretched
- Makes it and all children 100% of the parents width
- -contained
- Contains the stack to the width of the parent. Prevents overflow.
- -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
- --stack-gap
- Set a custom gap between the children