Elevation
Our elevation system is employed to indicate the hierarchy in the interface visually. They are used as a visual indication to show depth and establish a spatial relationship between elements.
Z-index Order
UI elements are depicted on a relative distance between each other. To concistenly place them on top of each other, every element makes use of a z-index order. This emphasizes a layering effect and hierarchy in our interfaces.
| Name | Detail |
|---|---|
| zIndex100 | tooltip |
| zIndex200 | menu |
| zIndex300 | popover |
| zIndex400 | sticky-content |
| zIndex500 | sheet |
| zIndex600 | modal-backdrop |
| zIndex700 | modal-sheet |
| zIndex800 | modal (dialog, alert, page, full screen) |
| zIndex900 | toast |
Shadows
Shadows can increase the relative depth for a given z-index order. An element with a smaller and sharper shadow indicates that the surface is closer to the surface behind it. Larger and softer shadows indicate more distance.
| Name | Detail |
|---|---|
| shadow-inset-2 | inset 0 1px 15px 0 rgba(0,0,0,0.28) |
| shadow-inset-1 | inset 0 1px 10px 0 rgba(0,0,0,0.24) |
| shadow-0 | none |
| shadow-1 | 0 2px 4px 0 rgba(0,0,0,0.12) |
| shadow-2 | 0 2px 7px 0 rgba(0,0,0,0.28) |
| shadow-3 | 0 7px 14px 0 rgba(0,0,0,0.28) |
| shadow-4 | 0 14px 28px 0 rgba(0,0,0,0.28) |