Shadow atomics are used to add a shadow effect around the frame of an element.
Here are examples of shadow atomics, ranging from none for no shadow to extra-heavy shadow.
box-shadow-none
box-shadow-light
box-shadow-medium
box-shadow-heavy
box-shadow-extra-heavy
HTML
<div class="display-block border padding-sm font-size-lg">
<div class="box-shadow-none padding-md margin-bottom-md border-radius">box-shadow-none</div>
<div class="box-shadow-light padding-md margin-bottom-md border-radius">box-shadow-light</div>
<div class="box-shadow-medium padding-md margin-bottom-md border-radius">box-shadow-medium</div>
<div class="box-shadow-heavy padding-md margin-bottom-md border-radius">box-shadow-heavy</div>
<div class="box-shadow-extra-heavy padding-md margin-bottom-md border-radius">
box-shadow-extra-heavy
</div>
</div>