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 | Description |
|---|---|---|---|
| 2021-05-25 | N/A |
|
Replaced entry for token |
