Shadows

Directions on how to elevate content from base surface via shadows

Guidelines

Box shadows or elevations help to differentiate content containers in a distinct way that is unique from a background element.


We reserve these shadows for smaller components such as cards, and larger components such as blocks to help create specialised separations, but aim to use them in minimal amounts and only when necessary.

Examples

Using box-shadows for small card components.

Using box-shadows for small card components.

Do

Use box-shadows to lift components like cards, pop up and menus away from the body container.

Don't

Do not use box shadows on objects that are already nested inside a component that uses a box shadow