Elevation utilities add box-shadow effects to create a sense of depth and visual hierarchy. They are commonly used on cards, modals, and popovers to lift elements above the surrounding content.
| Token | Value | Use case |
|---|
--tng-elevation-sm | 0 4px 10px 0 rgb(108 112 115 / 10%) | Subtle lift — cards, list items |
--tng-elevation-md | 0 15px 80px … (multi-layer) | Mid-level — dropdowns, popovers |
--tng-elevation-lg | 0 15px 80px … (multi-layer) | High emphasis — modals, dialogs |
All medium and large shadows use multi-layer box-shadow values to create a more natural-looking depth effect. Each layer targets a different spread and opacity, mimicking how real-world shadows behave at varying distances from a light source.
| Class | Sets |
|---|
.elevation-none | box-shadow: none |
.elevation-sm | box-shadow: var(--tng-elevation-sm) |
.elevation-md | box-shadow: var(--tng-elevation-md) |
.elevation-lg | box-shadow: var(--tng-elevation-lg) |
| Elevation | Typical use |
|---|
none | Reset elevation on a previously elevated element |
sm | Cards, tiles, list items — subtle lift to separate from surface |
md | Dropdowns, popovers, floating action buttons |
lg | Modals, dialogs, side panels — highest emphasis |
Several components apply elevation automatically so you don’t need to set it yourself:
| Component | Default elevation |
|---|
.tng-modal | var(--tng-elevation-lg) |
.tng-popover | var(--tng-elevation-md) |
.tng-dropdown | var(--tng-elevation-md) |
- Don’t stack shadows — avoid combining elevation utilities with custom
box-shadow declarations.
- Match elevation to hierarchy — more important or more “forward” UI elements should use higher elevation. Background content should use less.
- Pair with radius — elevated elements almost always look better with rounded corners. Combine with border radius utilities.
