Elevation
Elevação é a distância relativa entre duas superfícies nas quais vivem o conteúdo e os componentes. É um padrão visual usado para criar agrupamentos e associações entre conteúdo, bem como hierarquia e foco em profundidade. Cada tipo de superfície vive em um plano imaginário diferente da UI, dando a cada um sua própria elevação distinta.
Valores
Migração
Token | Valor | Exemplo |
|---|---|---|
| elevation.xs var(--elevation-xs) $elevation-xs | 0 2px 4px 0 rgba(25,31,35,0.24) | |
| elevation.sm var(--elevation-sm) $elevation-sm | 0 4px 8px 0 rgba(25,31,35,0.2) | |
| elevation.md var(--elevation-md) $elevation-md | 0 8px 16px 0 rgba(25,31,35,0.16) | |
| elevation.lg var(--elevation-lg) $elevation-lg | 0 16px 24px 0 rgba(25,31,35,0.12) | |
| elevation.xl var(--elevation-xl) $elevation-xl | 0 24px 32px 0 rgba(25,31,35,0.08) |