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>