Divider

Below is an example of a default <hr>.

<hr>

To begin building on a divider with Front Street features, start by adding class fs-divider and a color class.

<hr class="fs-divider secondary">

Thickness

To alter the thickness (i.e. height) of an .fs-divider element, add class divider-thick, divider-thicker or divider-thickest.

<hr class="fs-divider secondary">
<hr class="fs-divider secondary divider-thick">
<hr class="fs-divider secondary divider-thicker">
<hr class="fs-divider secondary divider-thickest">

Sizes

To alter the size (i.e. width) of an .fs-divider element, add class divider-xs, divider-sm, divider-md or divider-lg.

<hr class="fs-divider secondary divider-xs">
<hr class="fs-divider secondary divider-sm">
<hr class="fs-divider secondary divider-md">
<hr class="fs-divider secondary divider-lg">
<hr class="fs-divider secondary">

Alignment

When an .fs-divider element uses a size class from the previous section, it can also be given an alignment class — divider-left, divider-right or divider-center.

<hr class="fs-divider secondary divider-md divider-left">
<hr class="fs-divider secondary divider-md divider-center">
<hr class="fs-divider secondary divider-md divider-right">

Headings

And finally for fun, pairing dividers with headings can help a tendy effect. Really, there are just so many ways you could combine dividers with headings. Below is just a random asortment of examples.

Lorem Ipsum

<h1>
    Lorem Ipsum
    <span class="fs-divider divider-thick divider-xs secondary"></span>
</h1>

Lorem Ipsum

<h2>
    Lorem Ipsum
    <span class="fs-divider divider-xs secondary"></span>
</h2>

Lorem Ipsum

<h1 class="heading-lg text-center">
    Lorem Ipsum
    <span class="fs-divider divider-center divider-thick divider-xs secondary"></span>
</h1>

Lorem Ipsum

<h2 class="text-center">
    Lorem Ipsum
    <span class="fs-divider divider-center divider-xs secondary"></span>
</h2>