Shadows simulate height above the surface of an interface and can be used to created a layering effect.
| Class | Properties |
|---|---|
.shadow | @include shadow(); |
.shadow-xs | @include shadow-xs(); |
.shadow-sm | @include shadow-sm(); |
.shadow-md | @include shadow-md(); |
.shadow-lg | @include shadow-lg(); |
.shadow-xl | @include shadow-xl(); |
.shadow-solid | @include shadow-solid(); |
.shadow-inner | @include shadow-inner(); |
.shadow-outline | @include shadow-outline(); |
.shadow-none | box-shadow: none; |
Usage
Outer shadow
Use the .shadow, .shadow-xs, .shadow-sm, .shadow-md, .shadow-lg or .shadow-xl utilities to apply different sized outer box shadows to an element.
<div class="shadow-xs"></div>
<div class="shadow-sm"></div>
<div class="shadow"></div>
<div class="shadow-md"></div>
<div class="shadow-lg"></div>
<div class="shadow-xl"></div>Use .shadow-solid to apply a solid shadow to an element.
<div class="shadow-solid"></div>Inner shadow
Use .shadow-inner to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells.
<div class="shadow-inner"></div>Outline
Use .shadow-outline to apply a focus-ring-style shadow to an element.
<button class="button button-primary">Unfocused</button>
<button class="button button-primary shadow-outline">Focused</button>No shadow
Use .shadow-none to remove an existing box shadow from an element.
Variants
By default, both responsive or hover-state variants are generated for box-shadow utilities.
Responsive
To control the box shadow for an element at a specific breakpoint, add a {screen}: prefix to any existing box shadow utility.
For example, use .md:shadow-md to apply the shadow-md utility at only medium screen sizes and above.
Hover-state
To control the box shadow for an element’s hover state, add a hover: prefix to any existing box shadow utility.
For example, use .hover:shadow-md to apply the shadow-md utility when the element’s hover state is active.