Custom spacing
Utility classes to space out your elements
Margin
.margin-top-none { margin-top: none; }
.margin-top-xsmall { margin-top: .1rem; }
.margin-top-small { margin-top: .25rem; }
.margin-top-medium { margin-top: .5rem; }
.margin-top-large { margin-top: 1rem; }
.margin-top-xlarge { margin-top: 2rem; }
.margin-left-none { margin-left: none; }
.margin-left-xsmall { margin-left: .1rem; }
.margin-left-small { margin-left: .25rem; }
.margin-left-medium { margin-left: .5rem; }
.margin-left-large { margin-left: 1rem; }
.margin-left-xlarge { margin-left: 2rem; }
.margin-right-none { margin-right: none; }
.margin-right-xsmall { margin-right: .1rem; }
.margin-right-small { margin-right: .25rem; }
.margin-right-medium { margin-right: .5rem; }
.margin-right-large { margin-right: 1rem; }
.margin-right-xlarge { margin-right: 2rem; }
.margin-bottom-none { margin-bottom: none; }
.margin-bottom-xsmall { margin-bottom: .1rem; }
.margin-bottom-small { margin-bottom: .25rem; }
.margin-bottom-medium { margin-bottom: .5rem; }
.margin-bottom-large { margin-bottom: 1rem; }
.margin-bottom-xlarge { margin-bottom: 2rem; }
Padding
.padding-top-none { padding-top: none; }
.padding-top-xsmall { padding-top: .1rem; }
.padding-top-small { padding-top: .25rem; }
.padding-top-medium { padding-top: .5rem; }
.padding-top-large { padding-top: 1rem; }
.padding-top-xlarge { padding-top: 2rem; }
.padding-left-none { padding-left: none; }
.padding-left-xsmall { padding-left: .1rem; }
.padding-left-small { padding-left: .25rem; }
.padding-left-medium { padding-left: .5rem; }
.padding-left-large { padding-left: 1rem; }
.padding-left-xlarge { padding-left: 2rem; }
.padding-right-none { padding-right: none; }
.padding-right-xsmall { padding-right: .1rem; }
.padding-right-small { padding-right: .25rem; }
.padding-right-medium { padding-right: .5rem; }
.padding-right-large { padding-right: 1rem; }
.padding-right-xlarge { padding-right: 2rem; }
.padding-bottom-none { padding-bottom: none; }
.padding-bottom-xsmall { padding-bottom: .1rem; }
.padding-bottom-small { padding-bottom: .25rem; }
.padding-bottom-medium { padding-bottom: .5rem; }
.padding-bottom-large { padding-bottom: 1rem; }
.padding-bottom-xlarge { padding-bottom: 2rem; }
Custom spacing HTML
<h3>Margin</h3>
<pre class="code">
.margin-top-none { margin-top: none; }
.margin-top-xsmall { margin-top: .1rem; }
.margin-top-small { margin-top: .25rem; }
.margin-top-medium { margin-top: .5rem; }
.margin-top-large { margin-top: 1rem; }
.margin-top-xlarge { margin-top: 2rem; }
.margin-left-none { margin-left: none; }
.margin-left-xsmall { margin-left: .1rem; }
.margin-left-small { margin-left: .25rem; }
.margin-left-medium { margin-left: .5rem; }
.margin-left-large { margin-left: 1rem; }
.margin-left-xlarge { margin-left: 2rem; }
.margin-right-none { margin-right: none; }
.margin-right-xsmall { margin-right: .1rem; }
.margin-right-small { margin-right: .25rem; }
.margin-right-medium { margin-right: .5rem; }
.margin-right-large { margin-right: 1rem; }
.margin-right-xlarge { margin-right: 2rem; }
.margin-bottom-none { margin-bottom: none; }
.margin-bottom-xsmall { margin-bottom: .1rem; }
.margin-bottom-small { margin-bottom: .25rem; }
.margin-bottom-medium { margin-bottom: .5rem; }
.margin-bottom-large { margin-bottom: 1rem; }
.margin-bottom-xlarge { margin-bottom: 2rem; }
</pre>
<h3>Padding</h3>
<pre class="code">
.padding-top-none { padding-top: none; }
.padding-top-xsmall { padding-top: .1rem; }
.padding-top-small { padding-top: .25rem; }
.padding-top-medium { padding-top: .5rem; }
.padding-top-large { padding-top: 1rem; }
.padding-top-xlarge { padding-top: 2rem; }
.padding-left-none { padding-left: none; }
.padding-left-xsmall { padding-left: .1rem; }
.padding-left-small { padding-left: .25rem; }
.padding-left-medium { padding-left: .5rem; }
.padding-left-large { padding-left: 1rem; }
.padding-left-xlarge { padding-left: 2rem; }
.padding-right-none { padding-right: none; }
.padding-right-xsmall { padding-right: .1rem; }
.padding-right-small { padding-right: .25rem; }
.padding-right-medium { padding-right: .5rem; }
.padding-right-large { padding-right: 1rem; }
.padding-right-xlarge { padding-right: 2rem; }
.padding-bottom-none { padding-bottom: none; }
.padding-bottom-xsmall { padding-bottom: .1rem; }
.padding-bottom-small { padding-bottom: .25rem; }
.padding-bottom-medium { padding-bottom: .5rem; }
.padding-bottom-large { padding-bottom: 1rem; }
.padding-bottom-xlarge { padding-bottom: 2rem; }
</pre>
Custom spacing Style
You can find the original source of the CSS as .scss
Custom spacing
Have a use case that's not covered?
Please open an issue in the tracker. We'll update this living pattern library with your feedback.