Elevation
To follow BigCommerce design's spatial model, we have an elevation map which sets a component's shadow to show relative z-index distance between two components.
As in Material Design, every BigCommerce Pattern Lab component is 1 density-independent pixel (dp) thick. Elevation is measured from one component's surface, to the surface of the one below.
To use the elevation map, apply the elevation("value") to a component's box-shadow.
| Token | Value | |
|---|---|---|
elevation("lowest")
|
2dp | |
elevation("lower")
|
2dp | |
elevation("low")
|
3dp | |
elevation("high")
|
4dp | |
elevation("higher")
|
6dp | |
elevation("highest")
|
8dp |