Bolt Shadows

Utility Description

Add the utility class u-bolt-shadow-xx where xx equals the level of shadow you wish to apply.

For example: .u-bolt-shadow-level-10

level-10
Utility Class
.u-bolt-shadow-level-10
Scss Mixin
@include bolt-shadow("level-10");

level-20
Utility Class
.u-bolt-shadow-level-20
Scss Mixin
@include bolt-shadow("level-20");

level-30
Utility Class
.u-bolt-shadow-level-30
Scss Mixin
@include bolt-shadow("level-30");

level-40
Utility Class
.u-bolt-shadow-level-40
Scss Mixin
@include bolt-shadow("level-40");

level-50
Utility Class
.u-bolt-shadow-level-50
Scss Mixin
@include bolt-shadow("level-50");

level-60
Utility Class
.u-bolt-shadow-level-60
Scss Mixin
@include bolt-shadow("level-60");

level-70
Utility Class
.u-bolt-shadow-level-70
Scss Mixin
@include bolt-shadow("level-70");

To add an animated shadow that "lifts" on hover, add the u-bolt-shadow-xx-hoverable where xx equals the level of shadow you wish to use.

For example: .u-bolt-shadow-level-10-hoverable

level-10
Utility Class
.u-bolt-shadow-level-10-hoverable
Scss Mixin
@include bolt-shadow("level-10", true);

level-20
Utility Class
.u-bolt-shadow-level-20-hoverable
Scss Mixin
@include bolt-shadow("level-20", true);

level-30
Utility Class
.u-bolt-shadow-level-30-hoverable
Scss Mixin
@include bolt-shadow("level-30", true);

level-40
Utility Class
.u-bolt-shadow-level-40-hoverable
Scss Mixin
@include bolt-shadow("level-40", true);

level-50
Utility Class
.u-bolt-shadow-level-50-hoverable
Scss Mixin
@include bolt-shadow("level-50", true);

level-60
Utility Class
.u-bolt-shadow-level-60-hoverable
Scss Mixin
@include bolt-shadow("level-60", true);

level-70
Utility Class
.u-bolt-shadow-level-70-hoverable
Scss Mixin
@include bolt-shadow("level-70", true);