Layouts

Force spacing

Adjacent sections with different background colors will automatically create space for content. However, you can add various modifiers to a section to force spacing.

The options are: collapsed, extra-space, horizontal-rule, and force-padding. These modifiers always affect the bottom of the section they are added to.

Show/hide markup
<section class="section bg-none collapsed">
    <div class="row">
        <div class="layout">
            <!-- Content goes here -->
        </div>
    </div>
</section>

<section class="section bg-none extra-space">
    <div class="row">
        <div class="layout">
            <!-- Content goes here -->
        </div>
    </div>
</section>

<section class="section bg-none horizontal-rule">
    <div class="row">
        <div class="layout">
            <!-- Content goes here -->
        </div>
    </div>
</section>

<section class="section bg-none force-padding">
    <div class="row">
        <div class="layout">
            <!-- Content goes here -->
        </div>
    </div>
</section>