Browse Foundations

Foundations

Z-index

Design tokens for z-index stacking order across the SGDS design system.

Use these tokens to apply consistent stacking order across the design system. Values increase from base content to top-level modals.

Token

Value

Usage

sgds-z-index-base

Default page content and base surfaces.

sgds-z-index-raised

100

Raised surfaces such as cards, panels, and elevated content regions.

sgds-z-index-sticky

200

Sticky elements such as headers, navigation bars, and fixed sidebars that remain in view while scrolling.

sgds-z-index-floating

400

Floating UI such as dropdown menus, popovers, and anchored menus.

sgds-z-index-overlay

800

Transient overlays such as toasts, tooltips, and overlay chrome.

sgds-z-index-modal

1600

Top-level modal dialogs and scrims that must appear above all other layers.