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.
Shadow Sizes
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.
| Shadow HTML | CSS Value | Mixin |
|---|---|---|
Shadow None | 'none' | @include u-shadow('none') |
Shadow 1 | '0 1px 4px 0 rgba(0, 0, 0, 0.3)' | @include u-shadow(1) |
Shadow 2 | '0 4px 8px 0 rgba(0, 0, 0, 0.3)' | @include u-shadow(2) |
Shadow 3 | '0 8px 16px 0 rgba(0, 0, 0, 0.3)' | @include u-shadow(3) |
Shadow 4 | '0 12px 24px 0 rgba(0, 0, 0, 0.3)' | @include u-shadow(4) |
Shadow 5 | '0 16px 32px 0 rgba(0, 0, 0, 0.3)' | @include u-shadow(5) |
For Designers: How to apply Shadow in the NCIDS Design Kit in Figma
Refer to the Figma Guide for how to apply Shadow to an item in Figma.