Shadow

Depth perception and separation

The box shadow can be useful when there are multiple levels of backgrounds, for instance in a grouping situation on a dashboard. The shadow is then instended to be used on the containers separating the different sections from the background. The darker variant is also useful when using overlapping elements such as dropdowns. Avoid overusing and nesting.

See also rounded corners. For creating entrance boxes with shadow on hover, see the card component.

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.

Examples

Shadow types

<div class="bg-gray1 rad-a2px paxl mrs bshadow"></div>
<div class="bg-gray2 rad-a2px paxl mrs bshadow--dark"></div>

Container level

<div class="flex flex-wrap gal">
  <div class="flex-1">
    <div class="flex flex-wrap gam bg-white rad-a2px pal bshadow">
      <div class="flex-1">
        <div class="bg-green1 rad-a2px paxl"></div>
      </div>
      <div class="flex-1">
        <div class="bg-green1 rad-a2px paxl"></div>
      </div>
    </div>
  </div>
  <div class="flex-1">
    <div class="flex flex-wrap gam bg-white rad-a2px pal mbl bshadow">
      <div class="flex-1">
        <div class="bg-gray2 rad-a2px paxl"></div>
      </div>
      <div class="flex-1">
        <div class="bg-gray2 rad-a2px paxl"></div>
      </div>
      <div class="flex-1">
        <div class="bg-gray2 rad-a2px paxl"></div>
      </div>
    </div>
  </div>
</div>