Shadows

Shadows

Box Shadows

Shadow styles can be used for components like: toasts, drawers, modals, layers, tours, tooltips, pop-outs, cards, hover interactions or focus states.

Card shadow naming convention and spread and offset logic are based off the tachyon box shadow approach (opens in a new tab), with the exception of shadow 1 or card shadow.


Shadows and mobile

In certain cases it is desirable to not display shadows on smaller devices. For these cases we can use the .shadow-[n]-ns (n=1->6 are available as responsive classes). When applied, these classes will automatically only render a box-shadow at device widths greater than 768px.

Similar classes are available for m and l device widths to only render a box-shadow at certain widths. The structure for these classes is:

.shadow-[n]-[size]

medium (m): 768 - 1024px
large (l): > 1024px
Shadow 1 - Card shadow
0px 2px 0px 0px #D5D5D5shadow-1
Shadow 2 - Extra small
0px 1px 2px 0px rgba(102, 102, 102, 0.25)shadow-2
Shadows 3 - Small
0px 2px 4px 0px rgba(102, 102, 102, 0.25)shadow-3
Shadows 4 - Medium
0px 4px 8px 0px rgba(102, 102, 102, 0.25)shadow-4
Shadows 5 - Large
0px 8px 16px 0px rgba(102, 102, 102, 0.25)shadow-5
Shadows 6 - Extra large
0px 16px 32px 0px rgba(102, 102, 102, 0.25)shadow-6