Divider
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