Elevation and Shadows

We visually elevate (raise) components from the base layer using shadows. We use elevation to imply what's the relationship between the elevated component and the base layout: whether it's part of the layout (Boxes), somewhat connected to it (Popover Panels), or completely detached from it (Dialog).

Shadow Level 0 (No shadow)

Elements which are a static part of the layout have no shadow.
E.g. Boxes, Buttons, Tabs, inline Notifications, static Widgets, static Cards, etc.

Shadow Level 1

Elements that appear in the layout by default, but can be moved around in the layout.
E.g. movable Widget on Dashboard, Slider knobs, movable Cards in VCE, etc.

Shadow Level 2

Floating elements that have a connection to the layout itself, usually an extension to a layout item.
E.g. popover lists (Select, Dropdown, etc.), floating panels (Color picker, Date-time picker), Tooltips, etc.

Shadow Level 3

Floating elements that are not part of the layout, and fully detached from it.
E.g. Dialogs, Snack Bars, floating Notifications, Steps bar, etc.