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


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">
    <div class="content bg-pink-400 u-shadow-lg u-round-sm">



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>