Saltar al contenido principal

Elevation

Aplica sombras predefinidas a tus elementos para simular distintos niveles de profundidad. Este recurso es ideal para resaltar componentes en la interfaz, como tarjetas, menús o botones flotantes.

Uso básico

Uso con el componente card

ElevationClassPreview
1
elevation-1
Text
2
elevation-2
Text
3
elevation-3
Text
4
elevation-4
Text
5
elevation-5
Text

Aplica el helper directamente como clase de utilidad:

<div class="elevation-1">Elevación nivel 1</div>
<div class="elevation-3">Elevación nivel 3</div>
<div class="elevation-5">Elevación nivel 5</div>