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


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

Vertical

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

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

Inverse

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

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

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

Color Bar

The CenturyLink Color Bar is a brand element that represents the combined companies that comprise the new CenturyLink. It can be placed on the top or bottom of containers and must be used in the color order shown. The length can fluctuate to accent the design, as long as the dark blue is the shortest color, vibrant blue is larger than dark blue, and mint green is the longest color.

To render a colored divider apply the class -colorbar to a divider.

<div class="chi-divider -colorbar"></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

<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>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon