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
0px 2px 0px 0px #D5D5D5
shadow-1
0px 1px 2px 0px rgba(102, 102, 102, 0.25)
shadow-2
0px 2px 4px 0px rgba(102, 102, 102, 0.25)
shadow-3
0px 4px 8px 0px rgba(102, 102, 102, 0.25)
shadow-4
0px 8px 16px 0px rgba(102, 102, 102, 0.25)
shadow-5
0px 16px 32px 0px rgba(102, 102, 102, 0.25)
shadow-6