Divider

Dividers are lines that render a break or separation between content.

Examples

To render a divider, apply the class chi-divider to an hr or div tag.

Vertical #

To render a vertical divider, apply -vertical and ensure the parent container has a height specified.

Option
Option
Option


Inverse #

Use the -inverse class to render dividers on dark backgrounds.

Label #

Add text to a divider and apply the class -label to include a label. This method is especially useful for login and sign up forms. Label text size can be changed by applying text utility classes such as -text, -text--sm, or -text--lg.

Use border top utilities such as -bt--1, -bt--2, -bt--3, or -bt--4 to customize a dividers size.

-bt--1

-bt--2

-bt--3

-bt--4

Properties

Properties guidelines coming soon

Accessibility

Accessibility guidelines coming soon