### 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="bg--fill_02 p--02">Content above</div>
            <div class="spacer_vertical spacer--01"></div>
            <div class="bg--fill_02 p--02">Small spacer (4px)</div>
            <div class="spacer_vertical spacer--02"></div>
            <div class="bg--fill_02 p--02">Medium spacer (8px)</div>
            <div class="spacer_vertical spacer--04"></div>
            <div class="bg--fill_02 p--02">Large spacer (16px)</div>
            <div class="spacer_vertical spacer--08"></div>
            <div class="bg--fill_02 p--02">Extra large spacer (32px)</div>

#### Visible Spacer (for demonstration)

Content above
Content below (spacer is visible with background)
HTML

    <div class="bg--fill_02 p--02">Content above</div>
            <div class="spacer_vertical spacer--04 bg--accent_01"></div>
            <div class="bg--fill_02 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="d--flex align-items--center">
                <span class="bg--fill_02 p--02">Left</span>
                <span class="spacer_horizontal spacer--02"></span>
                <span class="bg--fill_02 p--02">Small gap</span>
                <span class="spacer_horizontal spacer--04"></span>
                <span class="bg--fill_02 p--02">Medium gap</span>
                <span class="spacer_horizontal spacer--08"></span>
                <span class="bg--fill_02 p--02">Large gap</span>
            </div>

### Flexible Spacers

Spacers that grow to fill available space.

#### Flex Spacer

Left aligned Right aligned
HTML

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

#### Multiple Flex Spacers

Left Center Right
HTML

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

### Divider Spacers

Spacers combined with visual dividers.

#### Spacer with Divider

Section one content

Section two content
HTML

    <div class="bg--fill_02 p--02">Section one content</div>
            <div class="spacer_divider spacer--04">
                <hr class="divider" />
            </div>
            <div class="bg--fill_02 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="bg--fill_02 p--02">Content above</div>
            <div
                class="spacer_vertical spacer--02 spacer--md-04 spacer--lg-08"
            ></div>
            <div class="bg--fill_02 p--02">
                Content below (spacer grows at larger breakpoints)
            </div>

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