Layers

Layers 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

Small shadow example with elevation
Small shadow example with elevation

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

Medium shadow example with elevation
Medium shadow example with elevation

Definition

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

Components

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

Large shadow example with elevation
Large shadow example with elevation

Definition

Large surfaces that present additional context to the user.

Components

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
Stacking layers example with elevation
Stacking layers example with elevation

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

Interactive layers example with elevation
Interactive layers example with elevation

Last updated at: