The cloud.gov spacing scale is based on a base grid of 8px. Use even multiples of this base grid when setting the height, width, padding, and margin of blocks and components. When possible, any spacing value should be a multiple of this base grid.
Our spacing grid sass variables provide an easy way to access grid multiples. The variable outputs the final value in terms of rem
but these are meant to directly correspond to a pixel multiplier.
$grid-05: 0.5 * base 4px
$grid-1: 1 * base 8px
$grid-105: 1.5 * base 12px
$grid-2: 2 * base 16px
$grid-3: 3 * base 24px
$grid-4: 4 * base 32px
$grid-5: 5 * base 40px
$grid-6: 6 * base 48px
$grid-7: 7 * base 56px
$grid-8: 8 * base 64px
$grid-9: 9 * base 72px
$grid-10: 10 * base 80px
There are basic utility classes for a subset of spacing classing. We can use utility classes to add positive spacing multiples to height
, width
, margin
, and padding
.
The class constructor pattern is:
[rule][variation]-[multiplier]
with the following rule codes:
w: width
h: height
p: padding
m: margin
and these variation codes for padding
and margin
:
[none]: all sides
h: horizontal (left and right)
v: vertical (top and bottom)
t: top
r: right
b: bottom
l: left
and the same multiplier codes from the grid variables:
05: 0.5x 4px
1: 1x 8px
105: 1.5x 12px
2: 2x 16px
3: 3x 24px
4: 4x 32px
5: 5x 40px
6: 6x 48px
7: 7x 56px
8: 8x 64px
9: 9x 72px
10: 10x 80px
m8
py1
h6
<h2 class="sans-st fw300 lh-hed textblack pt5 mb2 clear">Large values</h2>
<p class="sans-s6 fw700 lh-cap textblack mb4">
These large values are typically used only for fixed height or width.
</p>
<div class="mb4 clear">
<div class="h3 w15 bg-blue"></div>
<div class="h10 pt2">
<div class="pattern-title sans-s5 fw700">120px</div>
<div class="pattern-vars sans-s2 fw700">$grid-15</div>
<div class="pattern-code mono-s3 fw300">.w15</div>
</div>
</div>
<div class="mb4 clear">
<div class="h3 w20 bg-blue"></div>
<div class="h10 pt2">
<div class="pattern-title sans-s5 fw700">160px</div>
<div class="pattern-vars sans-s2 fw700">$grid-20</div>
<div class="pattern-code mono-s3 fw300">.w20</div>
</div>
</div>
<div class="mb4 clear">
<div class="h3 w25 bg-blue"></div>
<div class="h10 pt2">
<div class="pattern-title sans-s5 fw700">200px</div>
<div class="pattern-vars sans-s2 fw700">$grid-25</div>
<div class="pattern-code mono-s3 fw300">.w25</div>
</div>
</div>
<div class="mb4 clear">
<div class="h3 w30 bg-blue"></div>
<div class="h10 pt2">
<div class="pattern-title sans-s5 fw700">240px</div>
<div class="pattern-vars sans-s2 fw700">$grid-30</div>
<div class="pattern-code mono-s3 fw300">.w30</div>
</div>
</div>
<div class="mb4 clear">
<div class="h3 w40 bg-blue"></div>
<div class="h10 pt2">
<div class="pattern-title sans-s5 fw700">320px</div>
<div class="pattern-vars sans-s2 fw700">$grid-40</div>
<div class="pattern-code mono-s3 fw300">.w40</div>
</div>
</div>
<div class="mb4 clear">
<div class="h3 w50 bg-blue"></div>
<div class="h10 pt2">
<div class="pattern-title sans-s5 fw700">400px</div>
<div class="pattern-vars sans-s2 fw700">$grid-50</div>
<div class="pattern-code mono-s3 fw300">.w50</div>
</div>
</div>
<h2 class="sans-st fw300 lh-hed textblack pt5 mb2 clear">Large values</h2>
<p class="sans-s6 fw700 lh-cap textblack mb4">
These large values are typically used only for fixed height or width.
</p>
<div class="mb4 clear">
<div class="h3 w15 bg-blue"></div>
<div class="h10 pt2">
<div class="pattern-title sans-s5 fw700">120px</div>
<div class="pattern-vars sans-s2 fw700">$grid-15</div>
<div class="pattern-code mono-s3 fw300">.w15</div>
</div>
</div>
<div class="mb4 clear">
<div class="h3 w20 bg-blue"></div>
<div class="h10 pt2">
<div class="pattern-title sans-s5 fw700">160px</div>
<div class="pattern-vars sans-s2 fw700">$grid-20</div>
<div class="pattern-code mono-s3 fw300">.w20</div>
</div>
</div>
<div class="mb4 clear">
<div class="h3 w25 bg-blue"></div>
<div class="h10 pt2">
<div class="pattern-title sans-s5 fw700">200px</div>
<div class="pattern-vars sans-s2 fw700">$grid-25</div>
<div class="pattern-code mono-s3 fw300">.w25</div>
</div>
</div>
<div class="mb4 clear">
<div class="h3 w30 bg-blue"></div>
<div class="h10 pt2">
<div class="pattern-title sans-s5 fw700">240px</div>
<div class="pattern-vars sans-s2 fw700">$grid-30</div>
<div class="pattern-code mono-s3 fw300">.w30</div>
</div>
</div>
<div class="mb4 clear">
<div class="h3 w40 bg-blue"></div>
<div class="h10 pt2">
<div class="pattern-title sans-s5 fw700">320px</div>
<div class="pattern-vars sans-s2 fw700">$grid-40</div>
<div class="pattern-code mono-s3 fw300">.w40</div>
</div>
</div>
<div class="mb4 clear">
<div class="h3 w50 bg-blue"></div>
<div class="h10 pt2">
<div class="pattern-title sans-s5 fw700">400px</div>
<div class="pattern-vars sans-s2 fw700">$grid-50</div>
<div class="pattern-code mono-s3 fw300">.w50</div>
</div>
</div>
{
"patternMultiplier": "05",
"patternValue": "4px"
}