## 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="hr--base" />

### Thick HR

A thicker horizontal rule for stronger visual emphasis.

HTML

    <hr class="hr--thick" />

### Dotted HR

A dotted horizontal rule for a lighter visual separation.

HTML

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

### Dashed HR

A dashed horizontal rule style.

HTML

    <hr class="hr--dashed" />

### Double HR

A double-line horizontal rule for decorative purposes.

HTML

    <hr class="hr--double" />

### Faded HR

A subtle, faded horizontal rule for minimal visual separation.

HTML

    <hr class="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="divider divider--sm" />

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

            <p>Content with large divider below:</p>
            <hr class="divider 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="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="hr--thick" />

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

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

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

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

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!