Skip to content
Stable

Stack

Stack is a layout component to consistently control the vertical white space between elements. Stacks allow you to apply a standard spacing size between direct children. Spacing can be responsive and stacks can be nested.

Installation

bash
npm install @nib/layout

Usage

jsx
import {Stack} from '@nib/layout';

Do not style layout components

You must not apply styled-components to this component as it will interfere with the structure required for the current styling. This is true for all layout components.

Interactive demo

jsx

Props

PropTypeDefaultDescription
spacenumber or object0A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 0...10.

Considerations

The Stack component should be used to handle vertical spacing between components. Mesh components should have no external margins to enable greater composibility with layout components. It is simpler, more efficient and predictable to leave the concern of spacing to a layout component than the individual children.

Responsive

Often you will want less space between elements on mobile-sized screens than desktop. The space prop accepts an object of breakpoints to allow responsive spacing.

jsx
<Stack space={{xs: 4, md: 6}}>
<Copy>One</Copy>
<Copy>Two</Copy>
<Copy>Three</Copy>
</Stack>

Nesting stacks

Stacks can be nested.

jsx
<Stack space={{xs: 4, md: 6}}>
<div>
<Stack space={4}>
<Heading size={3}>Hello world</Heading>
<Copy>Lorem ipsum dolor sit amet.</Copy>
</Stack>
</div>
<Divider />
<div>
<Stack space={4}>
<Heading size={3}>Hello world</Heading>
<Copy>Lorem ipsum dolor sit amet.</Copy>
</Stack>
</div>
</Stack>

DOM element

The Stack component is a styled div element. To change this you can use the styled components as prop:

jsx
<Stack space={4} as="ul">
<div>One</div>
<div>Two</div>
<div>Three</div>
</Stack>

Default list styling has been removed from the stack component and each child will be wrapped in a <li> if stack is a <ul> or <ol>.