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.
Surfaces that need an indication they can be manually interacted with. For example, cards in issue boards.
- Components with shadow boundaries
- Passive, defines surface bounds when on a white backgrounds.
- Indicates surface can be interacted with.
0px 1px 2px rgba(0, 0, 0, 0.1)
Surfaces that need boundary definition and appear on hover. For example, popovers.
- Date picker
- Nagivation: Flyout Menus
- Stacked elevation components
- Cards when dragged
- Surfaces that appear on hover.
- Components layered above other components. Stacked layers and static components that have content that scrolls beneath.
0px 2px 8px rgba(0, 0, 0, 0.16),
0px 0px 2px rgba(0, 0, 0, 0.16);
Large surfaces that present additional context to the user.
- Passive, defines large surfaces presented as additional context to the user.
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.
- Content scrolls beneath static elements
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.
Last updated at: