Shadows & Depth

Overview

Z-index

Z-index is a CSS property that specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Overlays

Overlays work in concert with Modals and Dialogs to temporarily obstruct a user’s access to the underlying page and focus their attention on the content above the overlay.

Drop Shadows

Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.

Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product. Higher shadows must be positioned above lower shadows in the z-index.

Use one of the following classes to add shadow depth; shadow-sm, shadow or shadow-lg

Shadow Depths

UI Examples

Below are a few examples of shadows being used to create depth with our UI Elements.

Cards

Use shadows to make card elements pop based on importance.

Modals

Use shadows to separate modal dialogs from the main content layer.