#Spacing

Utilities that help to create white space within your pages. White space can be used effectively to give your content room to breathe.

#Content

As a convention for displaying content, Cirrus comes with two classes to layout and position content with the section element and content class.

The content class adds a margin to the left, right, and bottom of the element.

<section class="bg-pink-200 u-shadow-lg u-round-sm">
    <p>section</p>
    <div class="content bg-pink-400 u-shadow-lg u-round-sm">
        <p>content</p>
    </div>
</section>

#Space

A space is an independent element that serves as a buffer between elements. This class comes with different sizes which includes space--lg and space--xl.

<div class="space ..."></div>
<div class="space space--lg ..."></div>
<div class="space space--xl ..."></div>