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 navy blue is the shortest color, vibrant blue is larger than navy 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>