Box shadow

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

Classes

Section titled 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-ring	box-shadow: 0 0 0 @su4 var(--focus-ring);

Examples

Section titled Examples

<div class="bs-sm">…</div>
<div class="bs-md">…</div>
<div class="bs-lg">…</div>

.bs-sm

.bs-md

.bs-lg

.bs-ring