Dividers

Below is an example of a default <hr>.



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



Thickness

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









Size Element Height
Default .fs-divider 4px
Thick .fs-divider.divider-thick 8px
Thicker .fs-divider.divider-thicker 12px
Thickest .fs-divider.divider-thickest 16px

Sizes

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











Size Element Width
Extra Small .fs-divider.divider-xs 75px
Small .fs-divider.divider-sm 25%
Medium .fs-divider.divider-md 50%
Large .fs-divider.divider-lg 75%
Default .fs-divider 100%

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.







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

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum