Shadows
Easily add a sense of depth to your components using these classes.
| Shadow Z-Depth | ||
No Shadow |
For reference, this is an element with the default z-depth of 0. | |
.shadow-1 |
Add the .shadow-1 class to an element to give it a z-depth of 1. |
|
.shadow-2 |
Add the .shadow-2 class to an element to give it a z-depth of 2. |
|
.shadow-3 |
Add the .shadow-3 class to an element to give it a z-depth of 3. |
|
.shadow-4 |
Add the .shadow-4 class to an element to give it a z-depth of 4. |
|
.shadow-5 |
Add the .shadow-5 class to an element to give it a z-depth of 5. |
Hover
Use the hover classes to change the perceived z-depth of an element only when someone hovers/focuses on it.
| Shadow Z-Depth | ||
No Shadow |
For reference, this is an element with the default z-depth of 0. | |
.shadow-hover-1 |
Add the .shadow-hover-1 class to an element to change its z-depth to 1 on hover/focus. |
|
.shadow-hover-2 |
Add the .shadow-hover-2 class to an element to change its z-depth to 2 on hover/focus. |
|
.shadow-hover-3 |
Add the .shadow-hover-3 class to an element to change its z-depth to 3 on hover/focus. |
|
.shadow-hover-4 |
Add the .shadow-hover-4 class to an element to change its z-depth to 4 on hover/focus. |
|
.shadow-hover-5 |
Add the .shadow-hover-5 class to an element to change its z-depth to 5 on hover/focus. |
Soft Shadows
Make your content stand out against its background using soft shadows.
| Shadow Diffusion | ||
No Shadow |
For reference, this is an element with no shadow. | |
.soft-shadow-1 |
Add the .soft-shadow-1 class to an element to give it a soft shadow (diffusion amount: 1). |
|
.soft-shadow-2 |
Add the .soft-shadow-2 class to an element to give it a soft shadow (diffusion amount: 2). |
|
.soft-shadow-3 |
Add the .soft-shadow-3 class to an element to give it a soft shadow (diffusion amount: 3). |
Soft Hover
Use the soft hover classes to add a soft shadow to an element only when someone hovers/focuses on it.
| Shadow Diffusion | ||
No Shadow |
For reference, this is an element with no shadow. | |
.soft-shadow-hover-1 |
Add the .soft-shadow-hover-1 class to an element to change its soft shadow diffusion amount to 1 on hover/focus. |
|
.soft-shadow-hover-2 |
Add the .soft-shadow-hover-2 class to an element to change its soft shadow diffusion amount to 2 on hover/focus. |
|
.soft-shadow-hover-3 |
Add the .soft-shadow-hover-3 class to an element to change its soft shadow diffusion amount to 3 on hover/focus. |