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.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab

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

<Stack space={{xs: 4, md: 6}}>
  <Copy>nib is one of Australia's fastest growing health insurers.</Copy>
  <Copy>nib provides medical and health insurance to over one million Australian and New Zealand residents.</Copy>
  <Divider />
  <Copy>We also provide private health insurance cover to more than 130,000 international students and workers in Australia.</Copy>
  <Copy>As well as offering international health insurance to expats working and travelling overseas.</Copy>
</Stack>

Props

Prop	Type	Default	Description
`space`	number or object	`0`	A 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>.

Inline

Edit this page