Shadows

Shadow - XL Use in xxx

<div class="shadow-xl"></div>

Shadow - L Use in modals, forms & dropdown lists

<div class="shadow-l"></div>

Shadow - M Use on cards and large calls to action (link blocks)

<div class="shadow-m"></div>

Shadow - S Use on panels and elements that need only a slight shadow

<div class="shadow-s"></div>

Focused State Use in focus states