Skip to content
STYLESCAPE

Dividers

Standard Divider

Above the standard divider

Below the standard divider

HTML 
<p>Above the standard divider</p>
            <hr class="ss-c-divider" />
            <p>Below the standard divider</p>

Variants

Thin Divider

HTML 
<hr class="ss-c-divider ss-c-divider--thin" />

Thick Divider

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

Dotted Divider

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

Vertical Divider

Left
Right
HTML 
<div style="display: flex; align-items: center; height: 2rem">
                <span>Left</span>
                <div class="ss-c-divider--vertical"></div>
                <span>Right</span>
            </div>

Vertical Thin Divider

Left
Right
HTML 
<div style="display: flex; align-items: center; height: 2rem">
                <span>Left</span>
                <div class="ss-c-divider--vertical--thin"></div>
                <span>Right</span>
            </div>

Vertical Thick Divider

Left
Right
HTML 
<div style="display: flex; align-items: center; height: 2rem">
                <span>Left</span>
                <div class="ss-c-divider--vertical--thick"></div>
                <span>Right</span>
            </div>

Vertical Dotted Divider

Left
Right
HTML 
<div style="display: flex; align-items: center; height: 2rem">
                <span>Left</span>
                <div class="ss-c-divider--vertical--dotted"></div>
                <span>Right</span>
            </div>

Vertical (Inline) Divider

Left Right
HTML 
<div style="display: flex; align-items: center; gap: 16px">
                <span>Left</span>
                <span class="ss-c-divider--vertical--inline"></span>
                <span>Right</span>
            </div>