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 1

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

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

Shadow 2

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

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

Shadow 3

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

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

Shadow 4

For 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%