Utility classes may be included in your HTML or applied using Utility classes in your Sass.
Spacing units are used in conjunction with:
border, height, width, margin, padding, shape, indentation, and relative position.
Utility
Example
Code
.border-units
.border-2px
class=("border-2px")
.height-units
.height-05
class=("height-05")
.width-units
.width-05
class=("width-05")
.margin-units
.margin-05
class=("margin-05")
.padding-units
.padding-05
class=("padding-05")
.shape-units
.shape-05
class=("shape-05")
.text-indent-units
.text-indent-4
class=("text-indent-4")
.bottom-units
.bottom-05
class=("bottom-05")
Use single-quoted strings in Utility classes.
Do not quote numbers or px values. With the exception of half (05), values like
'105', and '205' should be treated as strings.
String tokens for half values (like 05) and negative values (like neg-1) may
also be written with their unquoted number token equivalent: 0.5, 1.5,
2.5, -1, -1.5, etc.
If multiple utilities share the same prefix (ex: .text- or .flex-) or a single
utility accepts multiple kinds of values (ex: .border accepts both border weight and border
color), their shared mixin can accept multiple comma-separated values:
u-text('primary-darkest', 'no-underline', 'bold')
u-border-top(2px, 'accent-warm')
Output any utility mixin as !important by appending !important to the mixin’s
argument list:
u-bg('red-warm-50v', !important)
Utility variants
More information about utility variants can be viewed on the utility variants page.
Responsive and state variants are listed as true when they are available for use.
Responsive variants
You can apply different styles at differentresponsive breakpoints using responsive utilities.
Use a breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher (eg. .desktop:border-05).
Utility variable
Responsive
$font-style-settings
false
State variants
You can apply different styles for different state variants using state utilities.
Use a state prefix separated with a : to target a utility for a specific state. (eg. .hover:shadow-2).
Utility variable
Active
Focus
Hover
Visited
$font-style-settings
false
false
false
false
Looking for U.S. government information and services?
