Usage

Use shadows to highlight differences in elevation between two components.

Shadows can be applied to multiple components, including cards, menus, sidebars, and tooltips.

Example of an activity stream card with the shadow style applied

A shadow applied to a card

Style

Based on how marked the difference needs to be, pick from three levels of elevation.

Shadow X Y Blur Color
10 0 1px 4px rgba(12, 12, 13, 0.1)
20 0 2px 8px rgba(12, 12, 13, 0.1)
30 0 4px 16px rgba(12, 12, 13, 0.1)

Asset that shows the three diffent styles of elevation, from lower to higher elevation