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.

Z-indexUse
1000Dropdowns
1020Sticky Elements
1030Fixed Elements
1040Modal Backdrops
1050Modal Dialogs
1060Popovers
1070Tooltips

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

Shadow (small)

Shadow

Shadow (large)

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.

Card Header

Card Title

With supporting text below as a natural lead-in to additional content.

Raised button
Card Header

Card Title

With supporting text below as a natural lead-in to additional content.

Raised button
Card Header

Card Title

With supporting text below as a natural lead-in to additional content.

Raised button

Modals

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