Divider
Description
Divider is a component that visually and semantically separates content or components.
Appearance
Types
Divider has two types: primary and secondary. Secondary type helps to separate and show the connection between two parts of the content.
use | Appearance | Styles |
|---|---|---|
primary |  | border: 1px solid var(--border-primary) |
secondary |  | border: 1px dashed var(--border-primary) |
Themes
The divider can be used either on a light or dark/colored background.
theme | Appearance | Styles |
|---|---|---|
| Default |  | border: 1px solid var(--border-primary) |
| Invert |  | border: 1px solid var(--border-primary-invert) |
Orientation
| Orientation | Example |
|---|---|
| Horizontal | |
| Vertical | |
Usage in UX/UI
The divider separates content visually and semantically, whether it's different or similar in meaning.
| Case | Example |
|---|---|
| Contact information needs to be visually separated from the form. |  |
| Separate information about a report's data visually from the form, but maintain its connection to the form. |  |