Link to Fluid's Microsoft Teams channel Link to the support page

Elevation

Shadows bring depth to the interface and bring the user's attention to some specific areas. Use them wisely and sparingly.

Elevations will be updated soon.

The shadows listed here are inherited from Fluid 2 legacy. For release updates and early access follow us on the team channel

Overview

Elevation 2-dp

Elevation 4-dp

Elevation 6-dp

Elevation 8-dp

Elevation 16-dp

Elevation 24-dp

Usage

Shadow can be used in design to add depth and dimension to elements on a page. It can help to create a visual hierarchy and draw the user’s attention to specific parts of the design. Shadow can also be used to give the appearance of floating elements, or to create a sense of movement or interaction.

Code

Please refer to the elevations design tokens.