Shadow
Depth perception and separation
The box shadow can be useful for separating the different sections from the background. The darker variant is also useful when using overlapping elements such as dropdowns. Avoid overusing and nesting.
| Class | Declaration | Usage |
|---|---|---|
| bshadow |
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 6%), 0 0px 5px 0 rgb(0 0 0 /
8%);
|
Standard shadow for items that need some separation from the background more than colours can provide. |
| bshadow--dark |
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%), 0 1px 5px 0 rgb(0 0 0 /
12%);
|
Darker shadow for darker items, darker backgrounds or overlaying elements. |
The shadows are also available as custom properties as
--shadow and --shadow-dark
<div class="radius-a paxl bshadow"></div>
<div class="bg-gray2 radius-a paxl bshadow--dark"></div>