Box shadow
Box shadow atomic classes allow you to change an element’s box shadow quickly.
| 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); |
<div class="bs-sm">…</div>
<div class="bs-md">…</div>
<div class="bs-lg">…</div>