Shadows

Examples

While shadows on components are disabled by default in Figuration and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-0 and a few default depths and insets.

.shadow-0 will remove all inset or outset shadows from an element.

<div class="shadow-0 radius p-1 mb-2">No shadow</div>
<div class="shadow-d1 radius p-1 mb-2">Shadow depth 1</div>
<div class="shadow-d2 radius p-1 mb-2">Shadow depth 2</div>
<div class="shadow-d3 radius p-1 mb-2">Shadow depth 3</div>
<div class="shadow-d4 radius p-1 mb-2">Shadow depth 4</div>
<div class="shadow-d5 radius p-1 mb-2">Shadow depth 5</div>
<div class="shadow-i1 radius p-1 mb-2">Shadow inset 1</div>
<div class="shadow-i2 radius p-1 mb-2">Shadow inset 2</div>
<div class="shadow-i3 radius p-1 mb-2">Shadow inset 3</div>
<div class="shadow-i4 radius p-1 mb-2">Shadow inset 4</div>
<div class="shadow-i5 radius p-1 mb-2">Shadow inset 5</div>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

("0":  none,
"d1": 0 .125rem .1875rem rgba($black, .15),
"d2": 0 .125rem .25rem rgba($black, .15),
"d3": 0 .125rem .5rem rgba($black, .15),
"d4": 0 .125rem .75rem rgba($black, .15),
"d5": 0 .125rem 1rem rgba($black, .15),
"i1": inset 0 .125rem .1875rem rgba($black, .15),
"i2": inset 0 .125rem .25rem rgba($black, .15),
"i3": inset 0 .125rem .5rem rgba($black, .15),
"i4": inset 0 .125rem .75rem rgba($black, .15),
"i5": inset 0 .125rem 1rem rgba($black, .15))

Mixins

No mixins available.