Elevation
The elevation is the level of the surface position where the content and components are located. The elevation is based on the Z-Index and this is the principle to classified between components with focus hierarchy through depth.
Elevation System
Use Case
| Level | description |
|---|---|
| 00 Ground | Use for background and container (fieldset, table header, table cell, divider, content grouping, etc) |
| 01 Panel | Use for background and container (fieldset, table header, table cell, divider, content grouping, etc) |
| 02 Bump | Use only for button |
| 03 Platform | Use for card container (content grouping) above ground or panel |
| 04 Hover | Use for button hover state |
| 05 Float | Use for container hover state and sticky navigation |
| 06 Fly | Use for modal dialog and popover |
| 07 Soar | These elevations can be used to spice up container appearance and/or its hover/active state |
| 08 Orbin | These elevations can be used to spice up container appearance and/or its hover/active state |
| 09 Spaceflight | These elevations can be used to spice up container appearance and/or its hover/active state |
| 19 Lunar Orbit | These elevations can be used to spice up container appearance and/or its hover/active state |