Divider

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

Examples

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

Base

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

Vertical

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

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

Inverse

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

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

Label

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.

or
<div class="a-divider -hasLabel">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

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