Elevation

Figma

We use elevation to create a sense of depth, allowing our users to make sense of data rich experiences. We create elevation by use of drop shadows in combination with color values. This combination creates a rich, layered experience that establishes formality for many of our patterns.

Also known as Drop shadow, elevation helps us to establish a sense of depth. By using our different drop shadow styles we create a relationship between surfaces. This relationship helps users to understand the hierarchy of information and to make sense of data rich experiences.

None

Default

Medium

Large

X-Large

2XL

3XL

Default elevation

The .tw-shadow utility class will apply a Default drop shadow.

Medium elevation

The .tw-shadow-md utility class will apply a Medium drop shadow.

Large elevation

The .tw-shadow-lg utility class will apply a Large drop shadow.

X-Large elevation

The .tw-shadow-xl utility class will apply an X-Large drop shadow.

2XL elevation

The .tw-shadow-2xl utility class will apply a 2XL drop shadow.

3XL elevation

The .tw-shadow-3xl utility class will apply a 3XL drop shadow.