Hey there! This is the Uniform version 3 documentation site. If you’re looking for version 4, go here instead.
When adding layers to an interface, this is the way to go—just pay attention to the stack order.
Use these variables for the content area of your interface.
| Name | Value | Variable |
|---|---|---|
| Content 1 | 100 | $zindex-1 |
| Content 2 | 200 | $zindex-2 |
| Content 3 | 300 | $zindex-3 |
| Content 4 | 400 | $zindex-4 |
| Content 5 | 500 | $zindex-5 |
| Content 6 | 600 | $zindex-6 |
| Content 7 | 700 | $zindex-7 |
| Content 8 | 800 | $zindex-8 |
| Content 9 | 900 | $zindex-9 |
Use these variables for expected interface elements like Modals, Toasts and notices.
| Name | Value | Variable |
|---|---|---|
| Tooltip | 1000 | $elevation-tooltip |
| Popover | 1000 | $elevation-popover |
| Notice | 1100 | $elevation-notice |
| Action Bar | 1200 | $elevation-action-bar |
| System Notice | 2000 | $elevation-system-notice |
| Nav | 3000 | $elevation-nav |
| Nav 1 | 3100 | $elevation-nav1 |
| Nav 2 | 3200 | $elevation-nav2 |
| Nav 3 | 3300 | $elevation-nav3 |
| Prompt Scrim | 4000 | $elevation-prompt-scrim |
| Prompt | 4100 | $elevation-prompt |
| Modal Container | 5000 | $elevation-modal-container |
| Overlay Container | 5000 | $elevation-overlay-container |
| Modal Scrim | 5100 | $elevation-modal-scrim |
| Overlay Scrim | 5100 | $elevation-overlay-scrim |
| Modal | 5200 | $elevation-modal |
| Overlay | 5200 | $elevation-overlay |
| Modal 1 | 5310 | $elevation-modal1 |
| Overlay 1 | 5310 | $elevation-overlay1 |
| Modal 2 | 5320 | $elevation-modal2 |
| Overlay 2 | 5320 | $elevation-overlay2 |
| Modal 3 | 5330 | $elevation-modal3 |
| Overlay 3 | 5330 | $elevation-overlay3 |
| Toast | 6000 | $elevation-toast |
| Alert Container | 6000 | $elevation-alert-container |
| Alert Scrim | 6100 | $elevation-alert-scrim |
| Alert | 6200 | $elevation-alert |
| System Status | 7000 | $elevation-system-status |