Elevation
Apply predefined shadows to your elements to simulate different depth levels. This feature is ideal for highlighting components in the interface, such as cards, menus, or floating action buttons.
Basic usage
Usage with the card component
| Elevation | Class | Preview |
|---|---|---|
| 1 | | Text |
| 2 | | Text |
| 3 | | Text |
| 4 | | Text |
| 5 | | Text |
Apply the helper directly as a utility class:
<div class="elevation-1">Elevation level 1</div>
<div class="elevation-3">Elevation level 3</div>
<div class="elevation-5">Elevation level 5</div>