Foundation
Spacing units
Why multiples of 8?
The number 8 is easily broken down into smaller measurements before it approaches sub-pixel units. Additionally, many popular screen sizes are also divisible by 8.
Spacing tokens
The VA follows the USWDS spacing unit tokens and then adds additional semantic tokens.
Primitive
vads-spacing-0
0
vads-spacing-0p5
4px
vads-spacing-0p25
2px
vads-spacing-1
8px
vads-spacing-1p5
12px
vads-spacing-1px
1px
vads-spacing-2
16px
vads-spacing-2p5
20px
vads-spacing-3
24px
vads-spacing-4
32px
vads-spacing-5
40px
vads-spacing-6
48px
vads-spacing-7
56px
vads-spacing-8
64px
vads-spacing-9
72px
vads-spacing-10
80px
vads-spacing-15
120px
Semantic
vads-forms-spacing-vertical-stack-default
vads-spacing-vertical-stack-l
vads-spacing-inset-l
vads-spacing-4
vads-spacing-inset-m
vads-spacing-3
vads-spacing-inset-s
vads-spacing-2
vads-spacing-site-margins-breakpoint
1024px
vads-spacing-site-margins-large
vads-spacing-4
vads-spacing-site-margins-small
vads-spacing-2
vads-spacing-vertical-stack-default
vads-spacing-vertical-stack-s
vads-spacing-vertical-stack-l
vads-spacing-4
vads-spacing-vertical-stack-m
vads-spacing-3
vads-spacing-vertical-stack-s
vads-spacing-2
Using the spacing units
In order to keep spacing consistent throughout VA.gov, it is recommended you favor using the unit tokens instead of hard coding pixels (or relative units) for margins and padding.
In order to access the unit tokens in your project, you will need to import the variables file into your project. Here is how this site is doing that.
There are two ways of using the spacing tokens in your code.
Output CSS as REM units
.foo {
margin: units(5);
padding: units(2.5);
}
will compile to:
.foo {
margin: 4rem;
padding: 2rem;
}
Output CSS as PX units
.foo {
margin: units-px(5);
padding: units-px(2.5);
}
will compile to:
.foo {
margin: 40px;
padding: 20px;
}