Shadow - Overview

Purpose

Shadows or elevations, as they’re sometimes called, are used for styling of both static and selectable elements of the UI with a choice of four elevation heights.

Shadow styling is most commonly used for containers such as Cards, Modals, Accordions.

These styling effects are typically used as visual aids for identifying the different states of a component, i.e. Default and Hover states for the Radio Card.

Shadow Styles

Shadow 1For non-interactive containers (e.g. static Cards, Product Card, Deal Card).

X=0; Y=2;Blur=8; Spread=0;#000000, 25%

Shadow 2For interactive elements in default state (e.g. Accordion, Radio Card, Signpost).

X=0; Y=6;Blur=15; Spread=0;#000000, 15%

Shadow 3For interactive elements in a hover state. (e.g. Accordion, Radio Card, Signpost).

X=0; Y=10;Blur=15; Spread=0;#000000, 20%

Shadow 4For overlay elements floating above the main page content (e.g. Modals, Popover).

X=0; Y=24;Blur=38; Spread=0;#000000, 5%

X=0; Y=9;Blur=46; Spread=0;#000000, 12%

X=0; Y=11;Blur=15; Spread=0;#000000, 20%