Skip to main content

Foundation

Elevation

Indicate hierarchy and create focus through the use of depth

banner-Elevation

Usage

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 LegionUI

Preview

ShapeFunc NameBox Shadow
shape preview elevation1()0px 1px 0px rgba(0, 0, 0, 0.05)
shape preview elevation2()0px 1px 1px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(0, 0, 0, 0.25)
shape preview elevation3()0px 2px 10px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2)
shape preview elevation4()0px 4px 20px rgba(0, 0, 0, 0.15), 0px 0px 3px rgba(0, 0, 0, 0.1)
shape preview elevation5()0px 8px 40px rgba(0, 0, 0, 0.2), 0px 0px 4px rgba(0, 0, 0, 0.1)
content.elevation1()
content.elevation2()
content.elevation3()
content.elevation4()
content.elevation5()