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.

Base

Web Component
HTML Blueprint

<div class="chi-divider"></div>

Vertical

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

Option

Web Component
HTML Blueprint

<div class="chi-divider -vertical"></div>

Inverse

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

Web Component
HTML Blueprint

<div class="chi-divider -inverse"></div>

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.

Web Component
HTML Blueprint

<div class="chi-divider -label">or</div>

Additional Sizes

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

Web Component
HTML Blueprint

<div class="chi-divider -bt--1"></div>
<div class="chi-divider -bt--2"></div>
<div class="chi-divider -bt--3"></div>
<div class="chi-divider -bt--4"></div>