Divider

Description

Divider is a component that visually and semantically separates content or components.

Divider has two types: primary and secondary. Secondary type helps to separate and show the connection between two parts of the content.

Divider types
`use`	Appearance	Styles
`primary`		`border: 1px solid var(--border-primary)`
`secondary`		`border: 1px dashed var(--border-primary)`

The divider can be used either on a light or dark/colored background.

Divider themes
`theme`	Appearance	Styles
Default		`border: 1px solid var(--border-primary)`
Invert		`border: 1px solid var(--border-primary-invert)`

Divider orientation
Orientation	Example
Horizontal
Vertical

The divider separates content visually and semantically, whether it is different or similar in meaning.

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

Last updated: