Design tokens

Shadow

Often used to indicate elevation, shadow tokens determine the size of a drop shadow (or box-shadow) around an item.

Shadow tokens

Output values are shown in px below but are output in rem in the final CSS, based on the base font size in your project settings.

Token Example Value
'none'
none
1
0 1px 4px 0 rgba(0, 0, 0, 0.1)
2
0 4px 8px 0 rgba(0, 0, 0, 0.1)
3
0 8px 16px 0 rgba(0, 0, 0, 0.1)
4
0 12px 24px 0 rgba(0, 0, 0, 0.1)
5
0 16px 32px 0 rgba(0, 0, 0, 0.1)

Using shadow tokens

Your context and coding style determine how you access USWDS shadow tokens in code.

Context Usage Example
function shadow(shadow) box-shadow: shadow(2)
mixin u-shadow(shadow) @include u-shadow(2)
setting shadow $theme-subnav-shadow: 2
utility .shadow-shadow .shadow-2

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date USWDS version Affects Breaking Description
2021-05-25 N/A
  • Guidance
No

Replaced entry for token 0 with token none. More information: uswds-site#1215