Shadow
Utilities to apply box-shadow and text-shadow to elements
Box Shadow
Box shadows are used to make content appear elevated. They are typically applied to containers of content that users need to pay attention to or content that appears on top of (overlapping) other elements on the page (like a pop-over or modal).
Box shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.
Important
To maintain Syracuse University brand and design standards, box shadows should never be used on logos, buttons, or images.
| Example | Class Name | CSS Value |
|---|---|---|
| .shadow-depth-1 | .box-shadow: 0 1px 4px 1px rgba(0, 0, 0, .10); | |
| .shadow-depth-2 | .box-shadow: 0px 3px 9px 2px rgba(0,0,0,0.15); | |
| .shadow-depth-3 | .box-shadow: 0px 3px 11px 2px rgba(0,0,0,0.25); |
Text Shadow
Text shadows are often used to add a drop shadow or outline to text. Adding the .text-shadow class to typographical elements will add a very light outline to the text to provide additional contrast.
Important
The text shadow class should only be used when white text appears on top of images, gradients or overlays to provide addition contrast.
| Example | ||
|---|---|---|
Syracuse University |
.text-shadow | text-shadow: |