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
0
0
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