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