Shadow

Use shadow utilities to add shadows to an element to enhance its layer effect.

Introduction

Shadow utilities are classes for setting the value of the box-shadow property. They are usually used to add layer effects to elements.

There’re three built-in shadow classes: .sd-low, .sd-normal and .sd-high. You can preview their effects in the below example.

If you want to remove the shadow effects of an element, add the .sd-none class to it.

Example

<p class="sd-low px-medium mb-medium">.sd-low</p>
<p class="sd-normal px-medium mb-medium">.sd-normal</p>
<p class="sd-high px-medium mb-medium">.sd-high</p>
<p class="sd-none px-medium" style="box-shadow: 10px 10px 10px rgba(0,0,0,0.5)">.sd-none</p>

Sass Variables

$box-shadow-low: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08) !default

$box-shadow-normal: 0 0.56rem 1.68rem rgba(0, 0, 0, 0.112) !default

$box-shadow-high: 0 0.784rem 2.352rem rgba(0, 0, 0, 0.1568) !default