Shadow
Shadow is used to indicate elevation; shadow tokens determine the size of a drop shadow (or box-shadow as the Cascading Style Sheet, CSS, property) around an item.
Shadow changes in NCIDS
NCIDS has increased the opacity of the CSS property box-shadow from the U.S. Web Design System’s (USWDS’s) 10% to the current 30% alpha value.
Utility Modules
Shadow
Set size of an item’s drop shadow.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.shadow-shadow | u-shadow(shadow) | @include u-shadow('2') |
The shadow utility has 6 settings (sizes) to choose from that are applied to the CSS property box-shadow: 'none', 1, 2, 3, 4, and 5. Each setting changes the size of the element's drop shadow.
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| box-shadow | False | hover | 0.06 KB | 0.33 KB |
Class name
Estimated computed value
Shadow
.shadow-none
none
.shadow-1
0 1px 4px 0 rgba(0, 0, 0, 0.3)
.shadow-2
0 4px 8px 0 rgba(0, 0, 0, 0.3)
.shadow-3
0 8px 16px 0 rgba(0, 0, 0, 0.3)
.shadow-4
0 12px 24px 0 rgba(0, 0, 0, 0.3)
.shadow-5
0 16px 32px 0 rgba(0, 0, 0, 0.3)