Elevation

Elevation addresses dimensional hierarchy and content relationships — not just top-down or scale, but also depth (z-index) and dynamic changes based on state or overflow. Visual styles and affordance that indicate depth, content boundaries, and state are also encompassed within layers.

Shadows

Small

Definition

Surfaces that need an indication they can be manually interacted with. For example, cards in issue boards.

Components

• Card
• Components with shadow boundaries

Attributes

• Passive, defines surface bounds when on a white backgrounds.
• Indicates surface can be interacted with.

Style

box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.1)

Medium

Definition

Surfaces that need boundary definition and appear on hover. For example, popovers.

Components

• Popover
• Date picker
• Dropdown
  • Disclosure
  • Combobox
• Nagivation: Flyout Menus
• Stacked elevation components
• Cards when dragged

Attributes

• Surfaces that appear on hover.
• Components layered above other components. Stacked layers and static components that have content that scrolls beneath.

Style

box-shadow:
0px 2px 8px rgba(0, 0, 0, 0.16),
0px 0px 2px rgba(0, 0, 0, 0.16);

Large

Definition

Large surfaces that present additional context to the user.

Components

• Modal
• Drawer

Attributes

• Passive, defines large surfaces presented as additional context to the user.

Style

box-shadow:
0px 4px 12px rgba(0, 0, 0, 0.16),
0px 0px 4px rgba(0, 0, 0, 0.16);

Stacking & overflowing layers

Layers that need to appear above a layer with an existing elevation should follow the stacking guidelines. By default, these stacked layers will use the md-shadow.

Use case

• Content scrolls beneath static elements

Interactive layers

Layers that can be moved or dragged by the user use the large shadow to create a greater sense of depth in the UI and define the element from other elements that may have an existing elevation.

Use case