Utilities

Template

Utility dek

CSS properties

property

Examples and usage

Utilities, values, and variants may be activated and deactivated in advanced settings.

Utility

CSS property: property

  • responsive
  • active
  • hover
  • focus
  • visited
1
2
3
4
5
6
7
8
9
10
11
<div class="display-block border-1px ...">.display-block</div>
<div class="display-flex border-1px ...">.display-flex</div>
<div class="display-inline border-1px ...">.display-inline</div>
<div class="display-inline-block border-1px ...">.display-inline-block</div>
<div class="display-inline-flex border-1px ...">.display-inline-flex</div>
<div class="display-none border-1px ...">.display-inline</div>
<div class="display-table">
<div class="display-table-row">
<div class="display-table-cell border-1px ...">.display-table-cell</div>
<div class="display-table-cell border-1px ...">.display-table-cell</div>
</div>

Responsive variants

Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.

Set which breakpoints are available to USWDS utilities with the $theme_output_breakpoints variable found in _uswds-theme-utilities.scss.

Breakpoint name Width Default
card 160px false
card-lg 240px false
mobile 320px false
mobile-lg 480px true
tablet 640px true
tablet-lg 880px false
desktop 1024px true
desktop-lg 1200px false
widescreen 1400px false

Set whether a utility family outputs with responsive variants by setting the value of $[utility_family]-settings.responsive in _uswds-theme-utilities.scss.

Utility variable Default

State variants

Use a state prefix separated with a : to target a utility in a specific state.

Set whether a utility outputs a specific state variant by setting the value of the $[utility_family]-settings.[state] variable in _uswds-theme-utilities.scss.

Utility variable active focus hover visited

Default output

Utility
Output SCSS
Default variable value

Output control

Control whether or not to output any USWDS utility family by setting the value of the $[utility_family]-settings.output variable found in _uswds-theme-utilities.scss.

A value of true will output the utility family and any variants. A value of false prevents the output of the family and any variants.

Utility variable Default

Custom values

By default, USWDS utilities output the standard values listed in the documentation above. Customize and refine any utility family’s specific values by editing the $[utility_family]-manual-values and $[utility_family]-palettes variables in _uswds-theme-utilities.scss.

Manual values

Specify manual values as unique key:value pairs using the $[utility_family]-manual-values map, where the key is the utility’s value suffix, and the value is what the utility will output.

Palettes

Palettes are predefined groups of values. Add palettes to the $[utility_family]-palettes list variable in _uswds-theme-utilities.scss to add those values to the utility family.