Horizontal Rules

Horizontal rules ( <hr> ) are used to create thematic breaks between content sections. They provide visual separation and help organize page content into logical groups.

Default HR

The default <hr> element is styled automatically without any classes.

Content above the horizontal rule.

Content below the horizontal rule.

HTML 
<p>Content above the horizontal rule.</p>
        <hr />
        <p>Content below the horizontal rule.</p>

HR with Base Class

Explicitly apply the base HR styling with the .hr--base class.

HTML 
<hr class="ss-c-hr--base" />

Thick HR

A thicker horizontal rule for stronger visual emphasis.

HTML 
<hr class="ss-c-hr--thick" />

Dotted HR

A dotted horizontal rule for a lighter visual separation.

HTML 
<hr class="ss-c-hr--dotted" />

Dashed HR

A dashed horizontal rule style.

HTML 
<hr class="ss-c-hr--dashed" />

Double HR

A double-line horizontal rule for decorative purposes.

HTML 
<hr class="ss-c-hr--double" />

Faded HR

A subtle, faded horizontal rule for minimal visual separation.

HTML 
<hr class="ss-c-hr--faded" />

Divider Classes

Generic divider classes with various spacing options.

Content with small divider below:

Content with medium divider below:

Content with large divider below:

HTML 
<p>Content with small divider below:</p>
        <hr class="ss-c-divider ss-c-divider--sm" />

        <p>Content with medium divider below:</p>
        <hr class="ss-c-divider ss-c-divider--md" />

        <p>Content with large divider below:</p>
        <hr class="ss-c-divider ss-c-divider--lg" />

HR in Context

Horizontal rules used to separate content sections.

Section One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section Two

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section Three

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML 
<article>
            <h4>Section One</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>

            <hr />

            <h4>Section Two</h4>
            <p>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.
            </p>

            <hr class="ss-c-hr--dotted" />

            <h4>Section Three</h4>
            <p>
                Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur.
            </p>
        </article>

Style Comparison

All horizontal rule styles compared side by side.

Default:

Thick:

Dotted:

Dashed:

Double:

Faded:

HTML 
<p><strong>Default:</strong></p>
        <hr />

        <p><strong>Thick:</strong></p>
        <hr class="ss-c-hr--thick" />

        <p><strong>Dotted:</strong></p>
        <hr class="ss-c-hr--dotted" />

        <p><strong>Dashed:</strong></p>
        <hr class="ss-c-hr--dashed" />

        <p><strong>Double:</strong></p>
        <hr class="ss-c-hr--double" />

        <p><strong>Faded:</strong></p>
        <hr class="ss-c-hr--faded" />