Elevation
Elevation in Nuvex UI is exposed through utility classes that define depth for surfaces, toolbars, and layered panels. Use this page to preview each level, understand the scale, and copy the exact class names used by the framework.
Usage
Pick an elevation level and inspect the generated class on a neutral surface. Use the result as a copyable token for layered UI.
Layered content with a visible shadow token.
Class syntax
Elevation helpers are expressed as e-elevation--{level}. Apply them on the root surface of the element that should receive depth.
Level suffix
Use xs, sm, md, lg, or xl to express the strength of the shadow.
Root surface
Apply elevation to the outermost container, not to inner content blocks.
Spacing and radius
Combine elevation with rounded corners and internal spacing for a complete surface.
Scale reference
The documented elevation scale moves from the lightest surface lift to the strongest surface depth.
xs
Very subtle depth for the lightest layered treatment.
sm
Default subtle elevation for most low-emphasis surfaces.
md
Balanced depth for standard raised surfaces and toolbars.
lg
Clear separation for more prominent floating surfaces.
xl
Strongest documented depth for highly elevated surfaces.
Implementation examples
Use elevation directly on surfaces that need visual separation from the page background.
Compact panel
A small surface with padding and a subtle shadow token.
Toolbar surface
A raised horizontal bar with balanced spacing and stronger separation.
Floating sheet
A layered panel that stands apart from the rest of the interface.
Framework notes
These notes summarize how elevation is expected to be used across the utility system.
- Use the lowest level that still separates the surface from its background.
- Pair elevation with rounded corners and spacing instead of overriding box-shadow manually.
- Keep elevation consistent with hierarchy so surfaces read predictably across the app.