Skip to content
STYLESCAPE

Spacer

Spacing utilities for vertical and horizontal whitespace between elements.

Vertical Spacers

Create vertical spacing between elements.

Spacer Sizes

Content above
Small spacer (4px)
Medium spacer (8px)
Large spacer (16px)
Extra large spacer (32px)
HTML 
<div class="ss-c-bg--fill_02 ss-c-p--02">Content above</div>
        <div class="ss-c-spacer_vertical ss-c-spacer--01"></div>
        <div class="ss-c-bg--fill_02 ss-c-p--02">Small spacer (4px)</div>
        <div class="ss-c-spacer_vertical ss-c-spacer--02"></div>
        <div class="ss-c-bg--fill_02 ss-c-p--02">Medium spacer (8px)</div>
        <div class="ss-c-spacer_vertical ss-c-spacer--04"></div>
        <div class="ss-c-bg--fill_02 ss-c-p--02">Large spacer (16px)</div>
        <div class="ss-c-spacer_vertical ss-c-spacer--08"></div>
        <div class="ss-c-bg--fill_02 ss-c-p--02">Extra large spacer (32px)</div>

Visible Spacer (for demonstration)

Content above
Content below (spacer is visible with background)
HTML 
<div class="ss-c-bg--fill_02 ss-c-p--02">Content above</div>
        <div class="ss-c-spacer_vertical ss-c-spacer--04 ss-c-bg--accent_01"></div>
        <div class="ss-c-bg--fill_02 ss-c-p--02">
            Content below (spacer is visible with background)
        </div>

Horizontal Spacers

Create horizontal spacing between inline elements.

Inline Spacers

Left Small gap Medium gap Large gap
HTML 
<div class="ss-c-d--flex ss-c-align-items--center">
            <span class="ss-c-bg--fill_02 ss-c-p--02">Left</span>
            <span class="ss-c-spacer_horizontal ss-c-spacer--02"></span>
            <span class="ss-c-bg--fill_02 ss-c-p--02">Small gap</span>
            <span class="ss-c-spacer_horizontal ss-c-spacer--04"></span>
            <span class="ss-c-bg--fill_02 ss-c-p--02">Medium gap</span>
            <span class="ss-c-spacer_horizontal ss-c-spacer--08"></span>
            <span class="ss-c-bg--fill_02 ss-c-p--02">Large gap</span>
        </div>

Flexible Spacers

Spacers that grow to fill available space.

Flex Spacer

Left aligned Right aligned
HTML 
<div class="ss-c-d--flex">
            <span class="ss-c-bg--fill_02 ss-c-p--02">Left aligned</span>
            <span class="ss-c-spacer--flex"></span>
            <span class="ss-c-bg--fill_02 ss-c-p--02">Right aligned</span>
        </div>

Multiple Flex Spacers

Left Center Right
HTML 
<div class="ss-c-d--flex">
            <span class="ss-c-bg--fill_02 ss-c-p--02">Left</span>
            <span class="ss-c-spacer--flex"></span>
            <span class="ss-c-bg--fill_02 ss-c-p--02">Center</span>
            <span class="ss-c-spacer--flex"></span>
            <span class="ss-c-bg--fill_02 ss-c-p--02">Right</span>
        </div>

Divider Spacers

Spacers combined with visual dividers.

Spacer with Divider

Section one content
Section two content
HTML 
<div class="ss-c-bg--fill_02 ss-c-p--02">Section one content</div>
        <div class="ss-c-spacer--divider ss-c-spacer--04">
            <hr class="ss-c-divider" />
        </div>
        <div class="ss-c-bg--fill_02 ss-c-p--02">Section two content</div>

Responsive Spacers

Spacers that adjust based on viewport size.

Responsive Vertical Spacer

Content above
Content below (spacer grows at larger breakpoints)
HTML 
<div class="ss-c-bg--fill_02 ss-c-p--02">Content above</div>
        <div
            class="ss-c-spacer_vertical ss-c-spacer--02 ss-c-spacer--md-04 ss-c-spacer--lg-08"
        ></div>
        <div class="ss-c-bg--fill_02 ss-c-p--02">
            Content below (spacer grows at larger breakpoints)
        </div>