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>
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.