Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Latest release: Component Library: v56.10.0 released on Aug 3, 2026 | Guidance: Sprint 4 released on Aug 4, 2026 | Figma: Changelog

Foundation

Elevation

Elevation (shadow) and z-index tokens.

Generated from css-library v0.34.1 (Tue, 04 Aug 2026 20:19:43 GMT).

Named stacking levels

Intent-based z-index tokens. Most work should reference these rather than the raw numeric scale.

Token Value Notes vads-elevation-z-index-bottom -100 Sends an element below the base stacking level. vads-elevation-z-index-base 0
vads-elevation-z-index-0 Base stacking level, level with the page. vads-elevation-z-index-level-1 100
vads-elevation-z-index-100 Stacking level 1, for slightly raised elements. vads-elevation-z-index-level-2 200
vads-elevation-z-index-200 Stacking level 2, for dropdowns and sticky elements. vads-elevation-z-index-level-3 300
vads-elevation-z-index-300 Stacking level 3, for overlays and popovers. vads-elevation-z-index-level-4 400
vads-elevation-z-index-400 Stacking level 4, for modals. vads-elevation-z-index-level-5 500
vads-elevation-z-index-500 Stacking level 5, for toasts and notifications. vads-elevation-z-index-top 99999 Highest stacking level, above all other content. vads-elevation-z-index-auto auto Automatic stacking (z-index auto).

Elevation tokens

Token Value Notes vads-elevation-shadow-1 0px 1px 4px 0px rgba(0, 0, 0, 0.1) Subtle drop shadow (elevation 1) for low-raised surfaces. vads-elevation-shadow-2 0px 4px 8px 0px rgba(0, 0, 0, 0.1) Drop shadow (elevation 2) for cards and raised surfaces. vads-elevation-shadow-3 0px 8px 16px 0px rgba(0, 0, 0, 0.1) Drop shadow (elevation 3) for menus and popovers. vads-elevation-shadow-4 0px 12px 24px 0px rgba(0, 0, 0, 0.1) Strong drop shadow (elevation 4) for modals. vads-elevation-shadow-5 0px 16px 32px 0px rgba(0, 0, 0, 0.1) Strongest drop shadow (elevation 5) for top-layer surfaces. vads-elevation-shadow-none none Removes the drop shadow (no elevation).

Z-index tokens

The raw numeric scale. Prefer the named stacking levels in new work.

Token Value Notes vads-elevation-z-index-0 0 Base stacking level (z-index 0). Prefer vads-elevation-z-index-base in new work. vads-elevation-z-index-100 100 Stacking level at z-index 100. Prefer vads-elevation-z-index-level-1 in new work. vads-elevation-z-index-200 200 Stacking level at z-index 200. Prefer vads-elevation-z-index-level-2 in new work. vads-elevation-z-index-300 300 Stacking level at z-index 300. Prefer vads-elevation-z-index-level-3 in new work. vads-elevation-z-index-400 400 Stacking level at z-index 400. Prefer vads-elevation-z-index-level-4 in new work. vads-elevation-z-index-500 500 Stacking level at z-index 500. Prefer vads-elevation-z-index-level-5 in new work.
Edit this page in GitHub (Permissions required)
Last updated: Jul 06, 2026