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-index Use
1000 Dropdowns
1020 Sticky Elements
1030 Fixed Elements
1040 Modal Backdrops
1050 Modal Dialogs
1060 Popovers
1070 Tooltips

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.