logo Atlas Design

Shadow Atomics

Shadow atomics are used to add a shadow effect around the frame of an element.

Usage

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>