Drop shadows

A drop shadow adds a shadow effect to an element or component.

This emphasises components or areas of the page by making it look like they are raised above the objects behind it.

View drop shadow in Figma
View code snippet

Guidelines

Elements and components in the design system come with the correct drop shadow applied.

If you want to use drop shadow in a new component, use the values in this table:

Shadow	Offset-x	Offset-y	Blur	Spread	Colour	Opacity
Default	0px	2px	10px	0px	#000000	0.15%
Hover	0px	2px	10px	0px	#000000	0.25%

If an element or component with drop shadow applied links to somewhere else, use the hover values to emphasise that it is clickable. You should also apply other visual cues such as text underline on hover.

Example

A signpost with the default drop shadow applied.

Changelog for this page

Date	Notes
14 April 2021	First version of page published