Box Shadows

Box shadows are used to help layer and elevate content. Shadows are applied in order to draw attention and separate content from other elements.

Variables

When writing Less, you can set an element's box-shadow by using a @box-shadow--{type} variable. The table below lists the available variables and its output.

Variable Output
@box-shadow--none none
@box-shadow--sm 0 0.2rem 0.4rem 0 rgba(20,23,33,.15)
@box-shadow--md 0 0.2rem 0.8rem 0 rgba(20,23,33,.25)
@box-shadow--lg 0 0.2rem 1.2rem 0 rgba(20,23,33,.3)
@box-shadow--xl 0 0.2rem 1.6rem 0 rgba(20,23,33,.3)
@box-shadow--card 0 0.2rem 1.6rem 0 rgba(20,23,33,.08),
0 0.2rem 0.4rem 0 rgba(20,23,33,.04),
0 0.1rem 0.2rem 0 rgba(20,23,33,.03)

Classes

Set an element's box-shadow by using the .d-box-shadow--{type} classes. The table below lists the available classes and their CSS output.

Class Output
.d-box-shadow--none box-shadow: none;
.d-box-shadow--sm box-shadow: 0 0.2rem 0.4rem 0 rgba(20,23,33,.15);
.d-box-shadow--md box-shadow: 0 0.2rem 0.8rem 0 rgba(20,23,33,.25);
.d-box-shadow--lg box-shadow: 0 0.2rem 1.2rem 0 rgba(20,23,33,.3);
.d-box-shadow--xl box-shadow: 0 0.2rem 1.6rem 0 rgba(20,23,33,.3);
.d-box-shadow--card box-shadow: 0 0.2rem 1.6rem 0 rgba(20,23,33,.08),
0 0.2rem 0.4rem 0 rgba(20,23,33,.04),
0 0.1rem 0.2rem 0 rgba(20,23,33,.03);

Examples

none
sm
md
lg
xl
card
<div class="d-box-shadow--none"></div>
<div class="d-box-shadow--sm"></div>
<div class="d-box-shadow--md"></div>
<div class="d-box-shadow--lg"></div>
<div class="d-box-shadow--xl"></div>
<div class="d-box-shadow--card"></div>