Elevations
Elevation is the relative distance between two surfaces along the z-axis.
Shadows can add very attractive depth and interaction to our design. Keeping them consistent from one component to another is very important.
| Demo | Value | SCSS Variables |
|---|---|---|
| 0 0 0 0 rgb(0 0 0 / 0) | $gel-elevation-none | |
| 0 2px 4px 0 rgb(0 0 0 / 10%) | $gel-elevation-low | |
| 0 4px 4px 0 rgb(0 0 0 / 18%) | $gel-elevation-medium | |
| 0 4px 4px 2px rgb(0 0 0 / 25%) | $gel-elevation-high |