Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

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.

Preview

ShapeToken Name
elevation0
elevation1
elevation2
elevation3
elevation4
elevation5

In your composable function, can use value LegionTheme.elevation.{elevation_token} on the colors attribute widget. Example below:

@Composable
fun YourComposable() {
Surface(
modifier = Modifier
.size(180.dp, 100.dp)
.padding(16.dp),
color = Color.White,
shadowElevation = LegionTheme.elevation.elevation0
) {