Box shadow

Box shadow atomic classes allow you to change an element’s box shadow quickly.

Classes

Class Output Hover? Focus?
.bs-none box-shadow: none;
.bs-sm box-shadow: 0 @su2 @su8 fade(@black-700, 10%);
.bs-md box-shadow: 0 @su4 @su8 fade(@black-700, 20%);
.bs-lg box-shadow: 0 @su4 @su12 fade(@black-800, 20%);
.bs-i-sm box-shadow: inset 0 @su2/2 @su8 0 fade(@black-700, 10%);
.bs-i-md box-shadow: inset 0 @su2/2 @su8 0 fade(@black-700, 20%);
.bs-i-lg box-shadow: inset 0 @su2/2 @su12 0 fade(@black-800, 20%);
.bs-ring box-shadow: 0 0 0 @su4 var(--focus-ring);

Examples

<div class="bs-sm"></div>
<div class="bs-md"></div>
<div class="bs-lg"></div>
<div class="bs-i-sm"></div>
<div class="bs-i-md"></div>
<div class="bs-i-lg"></div>
.bs-sm
.bs-md
.bs-lg
.bs-i-sm
.bs-i-md
.bs-i-lg
.bs-ring