Divider
Pattern
Live
The Divider pattern provides the user a visual break between content.
- Usage
- Examples
- Properties
- CSS Variables
Usage
Divider is a simple visual element that creates a horizontal line between sections of content. It comes with options for solid or dotted styling, and can display inserted text. Dividers can be restyled with any colour from the Chroma palette.
Installation
Install
yarn add @iag/chroma-react-ui.components
Import
import { Divider } from "@iag/chroma-react-ui.components";
When to use
Use Divider when you want to create a clear separation between different content blocks or sections.
When to avoid
Avoid using Divider to create space between components, consider adjusting spacing.
Do
- Do customise the style and colour of Divider as required.
Don't
- Don't use Divider merely to create space between components.
- Don't use Divider to group related content.
Text
Text can be inserted into the Divider for additional context or to title a section.