The Interactions utility group is a collection of specialized classes designed to augment user interactions within your projects. Unlike other utility groups, Interactions does not have a specific classbase, allowing for a variety of targeted functionalities.

With 3 distinct class groups, this utility equips you with the tools to enhance responsiveness in your elements. From enabling clickability to managing disabling behaviors, each class group serves a specific purpose, providing a comprehensive set of options for crafting interactive and user-friendly interfaces.

Hoverable Elements

The .hoverable class is designed to give any item the appearance of being clickable. To implement this feature in your project, simply add the .hoverable class to your desired element.

Hello, hover me boss!

                            <!-- Hoverable/clickable Element -->
<p class='hoverable'>...</p>

Disabling Elements

The .disabled class in JTB_MD renders any element non-interactive by disabling all pointer events, including clicking and hovering. To make an element non-interactable, simply apply the class to it.

Hello, I'm disabled by the host.

                        <!-- Disabled Element -->
<p class='disabled'>...</p>

Responsiveness

It is also possible to change an element's intaractivity basing 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
Hoverable	Active	`.hoverable-xxl`
Disabling	Active	`.disabled-xxl`