Atomics

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>
				