Shadows
Usage
Use shadows to highlight differences in elevation between two components.
Shadows can be applied to multiple components, including cards, menus, sidebars, and tooltips.
Style
Based on how marked the difference needs to be, pick from three levels of elevation.
Shadow | X | Y | Blur | Color |
---|---|---|---|---|
10 | 0 | 1px | 4px | rgba(12, 12, 13, 0.1) |
20 | 0 | 2px | 8px | rgba(12, 12, 13, 0.1) |
30 | 0 | 4px | 16px | rgba(12, 12, 13, 0.1) |