Shadows

Utility classes can be used to add drop shadows to your elements.

xs

shadow-xs: Used mostly for input fields, buttons, and any other element you want very subtly raised from the surface.

sm

shadow-sm: Used on smaller elements when you need a touch of depth.

md

shadow-md: Used when a little extra emphasis is needed on smaller elements.

lg

shadow-lg: Used for large cards (client portal main content area) where you want a more dramatic depth.

xl

shadow-xl: When extra emphasis is needed compared to the lg shadow.

xxl

shadow-xxl: When extra extra emphasis is needed, especially on darker backgrounds.