Stable

Divider

Our Divider component is a styled horizontal rule. It is a 20% opacity black single line to maintain its contrast on a variety of (light) background colours.

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

Installation

bash

npm install @nib-components/divider

Usage

jsx

import Divider from '@nib-components/divider';

Interactive demo

jsx

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

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

Props

Prop	Type	Default	Description
`color`	string	`default`	sets the color for the Divider component. Can be any of the `validBorderColorValues`
`size`	string	`fine`	sets the size for the Divider component. Value(s) must be a valid css value with units or valid borderWidth token values `none`, `fine`, `thin`, `medium` or `thick`

Considerations

The Divider component does not include spacing. You must handle this separately by using the appropriate layout component.

It is recommended to utilize the default properties for the divider. If customization is required, please consult with your designer to ensure consistency with the design specifications.

Edit this page