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-gray-200">
    <div class="content bg-gray-400">


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

<div class="space bg-indigo-100 mb-1"></div>
<div class="space large bg-indigo-200 mb-1"></div>
<div class="space xlarge bg-indigo-300 mb-1"></div>