Horizontal rule

Horizontal rules are used as “thematic breaks"' within a section of content.

Code

Line

<hr class="{hr-style} {hr-thickness} {hr-opacity} {hr-icon} {hr-spacing}" />

Line Demo

Image/Icon

<hr class="{hr-icon} {hr-spacing}" />

Classes

{hr-style}

Class	Description
Default (no class)	The line will be 1px thick and have a color of `#e5e5e5` (light gray).
`.accent1`	The line will be `#9eddeb` (Blue-Green).
`.accent2`	The line will be `#9ebceb` (Blue).
`.accent3`	The line will be `#ad9eeb` (Purple).
`.accent4`	The line will be `#ebd59e` (Gold).
`.accent5`	The line will be `#9eeba5` (Green).
`.invisible`	The line will not be visible and only serve as a spacer.
`.dotted`	The line will use the dotted border style and be the color `#999999`.
`.dashed`	The line will use the dashed border style and be the color `#999999`.
`.double`	The line will use the double border style (two lines) and be the color `#999999`. Cannot be paired with any `{hr-thickness}` class.

<hr />
<hr class="accent1"/>
<hr class="accent2"/>
<hr class="accent3"/>
<hr class="accent4"/>
<hr class="accent5"/>
<hr class="invisible"/>
<hr class="dotted"/>
<hr class="dashed"/>
<hr class="double"/>

Style Demo

Default

.accent1

.accent2

.accent3

.accent4

.accent5

.invisible

.dotted

.dashed

.double

{hr-thickness}

Class	Description
Default (no class)	The line will be 1px thick.
`.heavy`	The line will be 2px thick. Cannot be combined with `.double`.
`.extra-heavy`	The line will be 3px thick. Cannot be combined with `.double`.

<hr class="heavy"/>
<hr class="extra-heavy"/>

Thickness Demo

.heavy

.extra-heavy

{hr-opacity}

Class	Description
Default (no class)	The line will have an opacity of 1.
`.fade`	The line will have an opacity of 0.3.

Opacity Demo

Default

.fade

{hr-icon}

Used to define an icon as the line break instead of a line.

Class	Description
Default (no class)	The hr will be a 1px thick `#e5e5e5` line.
`.flourish`	The hr will be an SVG icon. By default, it will be a swirl icon with a default height of 28px. To override, target `hr.flourish` in CSS and replace the `background` property with your SVG. Adjust the height as necessary.
`.bigred`	The hr will be the clocktower SVG icon. It will be 32px tall and have an opacity of 0.4.

Icon Demo

Default

.flourish

.bigred

{hr-spacing}

Used to modify margin and padding of the horizontal rule

Class	Description
Default (no class)	The horizontal rule will display as a block based on your browser default. It will span the full width of the containing element.
`.inline`	Use if the horizontal rule needs to fit alongside a floated element.
`.section-break`	Clears space before and after the horizontal rule if there are floated elements.