Dividers are lines that render a break or separation between content.
To render a divider, apply the class a-divider
to an hr
or div
tag.
<div class="a-divider"></div>
To render a vertical divider, apply -vertical
and ensure the parent container has a height specified.
<div class="a-divider -vertical"></div>
Use the -inverse
class to render dividers on dark backgrounds.
<div class="a-divider -inverse"></div>
Add text to a divider and apply the class -hasLabel
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--small
, or -text--large
.
<div class="a-divider -hasLabel">or</div>
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="a-divider -colorbar"></div>
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="a-divider -bt--1"></div>
<div class="a-divider -bt--2"></div>
<div class="a-divider -bt--3"></div>
<div class="a-divider -bt--4"></div>