Overview
Elevation is typically communicated through the use of shadows. The shadow's appearance is determined by the component's elevation (z-index) and its relationship to other surfaces. Shadows are commonly used in various scenarios, such as elements laid on top of a map, overlays like sheets or dialogs, and overlapping content like snackbars.
Resources
Values
The level structure is used to mimic the way light interacts with objects and creating a sense of depth and realism. There are 6 levels of elevation from Ground to Level 5.
| Level | Variable | Component Usage |
|---|---|---|
| Ground | None | Most ground level components |
| Level 1 | now-global-drop-shadow--sm | Button (Hover), Card (Dashboard) |
| Level 2 | now-global-drop-shadow--md | Card (Hover), Popover, Elevated containers |
| Level 3 | now-global-drop-shadow--lg | Floating action button , Alerts |
| Level 4 | now-global-drop-shadow--xl | Floating action button (Hover), Modeless window |
| Level 5 | now-global-drop-shadow--xxl | Modal |
Stacking versus overlapping
Stacking is when a UI element is completely on top of another. The shadow will be sm. Overlapping is when UI elements are partially above each other, they will remain consistent with their levels on the z-index.
An example of stacking.
An example of overlapping.