Hudl Design System

Last Modified:August 9, 2017

Z-Index + Elevation

Z-index is the tool we use to adjust the natural stacking context between the different “layers” of web interfaces (if you haven’t used z-index, read this MDN article to learn more about it). Properly applying Z-index can be tricky. To help ease that stress, Uniform provides a robust z-index and elevation scale that should take the guess work out of manipulating the stacking context. With this scale, you should never need to type z-index: 9999999999; again.

The scale is split into two main parts: the content scale (what you’ll be using for most of your interfaces) and specific component scales (what Uniform will be using as we build out advanced plugins/components in th system). The specific component scale introduces the concept of elevation. Regardless of what you do within the interface you’re building, we know a modal, for instance, still needs to sit above content. If you are creating things like Modals or Toast with non-Uniform components, you need to use the applicable elevation variables below to ensure that everything stacks correctly and consistently. If you are not using the variables below for your z-index values, it is strongly recommended that you start migrating now. As time passes, and this system matures, the values will change, which might cause stacking issues, if you work outside this system.

If you’re using the previously available variables for Modals, Navigation, Notifications and Toast, those variables have been deprecated. The suggested mapping to new variables is outlined on the deprecations page.

# Z-Index Content

These z-index values are for you to use within the content area of your interface. This scale should be more than you'll ever need to successfully layer items as intended. This scale is designed to seemlessly work alongside universal layered elements and components such as modals, toasts, alerts and navigation. It's important to use these variables and not copy the values into your code base. Over time, the actual numbers will change, as we add, remove and refine the layering system in total.

Variable Value Usage
$zindex-1 100 Start here ...
$zindex-2 200
$zindex-3 300
$zindex-4 400
$zindex-5 500
$zindex-6 600
$zindex-7 700
$zindex-8 800
$zindex-9 900 ... wow, you're sure using a lot of z-index.

# Elevation System Status

Universal top of the page status messages, relaying critical information such as the loss of Internet connection.

Variable Value Usage
$elevation-system-status 7000

# Elevation System Notice

Universal messages that appear beneath the navigation, indicating important information such as an account invoice due date.

Variable Value Usage
$elevation-system-notice 2000

# Elevation Toast

Momentary feedback messages about user initiated actions.

Variable Value Usage
$elevation-toast 6000

# Elevation Alert

Variable Value Usage
$elevation-alert-container 6000 The overall container all alert pieces reside within
$elevation-alert-scrim 6100 The overlay, scrim or backdrop of the alert that layers between the modal and the rest of the interface
$elevation-alert 6200 The actual alert

# Elevation Modal

Variable Value Usage
$elevation-modal-container 5000 The overall container all Modal pieces reside within
$elevation-modal-scrim 5100 The overlay, scrim or backdrop of the modal that layers between the modal and the rest of the interface
$elevation-modal 5200 The actual modal
$elevation-modal1 5310 For stacking needs within Modal content area
$elevation-modal2 5320
$elevation-modal3 5330

# Elevation Navigation

Variable Value Usage
$elevation-nav 3000
$elevation-nav1 3100
$elevation-nav2 3200
$elevation-nav3 3300

# Elevation Action Bar

Variable Value Usage
$elevation-action-bar 1200

# Elevation Notice

Variable Value Usage
$elevation-notice 1100

# Elevation Prompt

Variable Value Usage
$elevation-prompt-scrim 4000
$elevation-prompt 4100

# Elevation Popover

Variable Value Usage
$elevation-popover 1000

# Elevation Tool Tip

Variable Value Usage
$elevation-tooltip 1000