Overview

Elevation introduces a sense of realism and improves the visual hierarchy and usability of our digital products.

• Use elevation to establish visual hierarchy
• Elevation indicates interactivity of an element like buttons or cards
• Depth helps to establish focus (e.g. a modal)

Usage

Apply the desired elevation to the box-shadow property to a given class that targets the element that should receive the elevation styling.

.custom-class {
  box-shadow: var(--elevation-[selected-size]);
}

Tokens

Clicking the examples below will copy var(--elevation-[size]) to your clipboard.

Best Practices [in progress]

[See Product Design to flesh out this section, the following is a draft.]

EXAMPLE - LIGHT ELEVATION

• When to use:
  • Highlighting interactivity
  • An item floats above other content
• When not to use:
  • When element doesn't need additional emphasis and is not interactive

EXAMPLE - HEAVY ELEVATION

• When to use:
• When not to use: