Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date.
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).
Small
Small shadows are mainly used on things that need to appear slightly elevated, like pricing cards or UI elements containing important information.
<divclass="color-shadow-small p-3">
.color-shadow-small
</div>
These types of shadows are typically applied to elements with borders, such as the Box component.
<divclass="col-6">
<divclass="Box color-shadow-small">
<divclass="Box-row">
<h3class="m-0">Organization</h3>
</div>
<divclass="Box-row">
<pclass="mb-0 color-text-secondary">
Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled
church-key thundercats. Brooklyn bicycle rights tousled, marfa actually.
</p>
</div>
<divclass="Box-row">
<buttontype="button"name="Create an organization"class="btn btn-primary btn-block">
Create an organization
</button>
</div>
</div>
</div>
Medium
Medium box shadows are more diffused and slightly larger than small box shadows.
<divclass="color-shadow-medium p-3">
.color-shadow-medium
</div>
Medium box shadows are typically used on editorialized content that needs to appear elevated. Most of the time, the elements using this level of shadow will be clickable.