Shadow Utilities is a class group dedicated to updating element shadows. Crafted with customization and responsiveness in mind, it simplifies the process of achieving the perfect elevations for your projects through easy class assignments.

In JTB_MD, the defined class-base for shadow utilities is .jtbS.

How to use

To elevate an element / add shadow into it in JTB_MD, you can simply give the corresponding shadow class into it. There are four different spreadings defined in the library:

.jtbS-[ none | small | medium | large ].

.jtbS-none .jtbS-small .jtbS-medium .jtbS-large

                            <!-- Small spread -->
<span class='jtbS-small'>...</span>

Responsiveness

It is also possible to make your element's shadow behave differently based on the screen sizes of clients. To activate this utility, simply add the related screen breaker (defined in Breakpoints seciton) at the end of the corresponding class with a hyphen (-):

Refer to the table below to understand which parts of the utility group can be used with screen breakers:

Part of group	Responsiveness	Example class
All classes	Active	`.jtbS-small-xxl`