Elevation
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.
Custom properties
Section titled “Custom properties”These utilities set this custom property:
--tng-elevation
This can be combined with other utilities, overridden in descendant elements or inline styles, or set directly to any value: style="--tng-elevation: 0 2px 8px rgb(0 0 0 / 10%);". The Box component consumes this property automatically.
Tokens
Section titled “Tokens”| 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.
Utility classes
Section titled “Utility classes”| Class | Sets |
|---|---|
.elevation-none | --tng-elevation: none |
.elevation-sm | --tng-elevation: var(--tng-elevation-sm) |
.elevation-md | --tng-elevation: var(--tng-elevation-md) |
.elevation-lg | --tng-elevation: var(--tng-elevation-lg) |
.elevation-sm .elevation-md .elevation-lg When to use
Section titled “When to use”| 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 |
Components with built-in elevation
Section titled “Components with built-in elevation”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) |
Best practices
Section titled “Best practices”- Don’t stack shadows — avoid combining elevation utilities with custom
box-shadowdeclarations. Use--tng-elevationto keep a single source of truth. - 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.