Resources

Z-Index & Elevation

When adding layers to an interface, this is the way to go—just pay attention to the stack order.

Web
React Native
Android
Apple
Other

Z-Index

Use these variables for the content area of your interface.

NameValueVariable
Content 1100$zindex-1
Content 2200$zindex-2
Content 3300$zindex-3
Content 4400$zindex-4
Content 5500$zindex-5
Content 6600$zindex-6
Content 7700$zindex-7
Content 8800$zindex-8
Content 9900$zindex-9

Elevation

Use these variables for expected interface elements like Modals, Toasts and notices.

NameValueVariable
Tooltip1000$elevation-tooltip
Popover1000$elevation-popover
Notice1100$elevation-notice
Action Bar1200$elevation-action-bar
System Notice2000$elevation-system-notice
Nav3000$elevation-nav
Nav 13100$elevation-nav1
Nav 23200$elevation-nav2
Nav 33300$elevation-nav3
Prompt Scrim4000$elevation-prompt-scrim
Prompt4100$elevation-prompt
Modal Container5000$elevation-modal-container
Modal Scrim5100$elevation-modal-scrim
Modal5200$elevation-modal
Modal 15310$elevation-modal1
Modal 25320$elevation-modal2
Modal 35330$elevation-modal3
Toast6000$elevation-toast
Alert Container6000$elevation-alert-container
Alert Scrim6100$elevation-alert-scrim
Alert6200$elevation-alert
System Status7000$elevation-system-status