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
- 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
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
Last updated at: