Box Shadow

File location: sass/layout/helpers/_utilities.scss (GitHub)

⚠️ Element shadows are mostly useful on light or medium backgrounds and haven't been adapted for dark mode.

.embossed

.embossed-left

.embossed-right

.box-shadow-1

.box-shadow-2

.box-shadow-3

.box-shadow-4

.box-shadow-5

.box-shadow-6

Code example:

<div class="padding-50 pr-140 box-shadow-1 bg-white max-content-max radius-4">
  <p><strong>MATT W. HABIBI</strong><br>
  <small><a href="mailto:[...]">matt.w.habibi@harvard.edu</a></small>
</div>

Result:

MATT W. HABIBI
Systems Administrator

matt.w.habibi@harvard.edu

← Previous: Shapes

Next: Cursors →