Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback



Indicate hierarchy and create focus through the use of depth



Elevation is used to indicate hierarchy and create focus through the use of depth. Components with the same elevations create an effect of grouping and similarity between content while components on different elevations reflect spatial relationships. Elevation is depicted through shadows to create an effect of depth. Components closer to the base layer have sharper shadows, while components that are elevated have softer shadows. You can chek out the guideline for more detail description.

import { elevation } from "@legion-ui/core";


Please note that each value of the elevation property is determined by the token from each theme.

ShapeToken NameBox Shadow
elevation00px 0px 0px 2px #EEAFAF
elevation10px 1px 0px rgba(0, 0, 0, 0.05)
elevation20px 1px 1px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(0, 0, 0, 0.25)
elevation30px 2px 10px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2)
elevation40px 4px 20px rgba(0, 0, 0, 0.15), 0px 0px 3px rgba(0, 0, 0, 0.1)
elevation50px 8px 40px rgba(0, 0, 0, 0.2), 0px 0px 4px rgba(0, 0, 0, 0.1)

There are two ways on how you can use the elevation toolkit. First by using Legion V2’s components and second by using HTML elements.


For Legion V2 usage, please refer to each component’s documentation page for more information.

<Box shadow="elevation0">...</Box>
<Box shadow="elevation1">...</Box>
<Box shadow="elevation2">...</Box>
<Box shadow="elevation3">...</Box>
<Box shadow="elevation4">...</Box>
<Box shadow="elevation5">...</Box>

HTML Elements

<div style={{ boxShadow: `${elevation.elevation1}` }}>...</div>
<div style={{ boxShadow: `${elevation.elevation2}` }}>...</div>
<div style={{ boxShadow: `${elevation.elevation3}` }}>...</div>
<div style={{ boxShadow: `${elevation.elevation4}` }}>...</div>
<div style={{ boxShadow: `${elevation.elevation5}` }}>...</div>