Utilities are a collection of modifier classes that fine-tune layouts and components and keep consistency. You can add a utility classes as a combo class to adjust a behavior of the main class or apply it as a main class to define the functionality of an element. Fo instance, if you want to add a shadow to a card, you can add shadow utility class as a combo class for a card:
All utility classes are prefixed with [Utility]. The naming of the utility class describes exactly what it’s doing.
Margins and padding are applied to sections, containers, and other elements to define inner spacing or distance between elements.
Margin defines the space outside of an element.
Content
Utility classes use this structure:
[Utility] Margin Direction Value
Margin Vertical
Top, Bottom0, 0.5rem, 1rem, 2rem, 3rem, 4rem, 5rem, 6rem, 7rem, 8rem, AutoMargin Horizontal
Left, Right, All0, 0.5rem, 1rem, 2rem, AutoUtility classes
Padding defines the space inside of an element.
Content
Utility classes use this structure:
[Utility] Padding Direction Value
Padding Vertical
Top, Bottom0, 0.5rem, 1rem, 2rem, 3rem, 4rem, 5rem, 6rem, 7rem, 8remPadding Horizontal
Left, Right1rem, 2remPadding Around
All0, 0.5rem, 1rem, 2rem, 3rem, 4remPadding Utilities
On smaller screens (like Mobile Landscape), some margin and padding utility classes will use smaller spacing variables than their desktop counterparts.
For example:
[Utility] Margin Top 6remThis behavior ensures better vertical rhythm and balance on smaller screens without needing to apply breakpoint-specific classes manually.
Utilities to control layout visibility and content flow.
Controls element positioning behavior across breakpoints.
Desktop
Tablet
Mobile
Controls element translation and rotation.
Controls fixed, responsive, and percentage-based width settings.
Desktop
Tablet
Mobile Landscape
Mobile Portrait
Controls element height and minimum height behavior across breakpoints.
Desktop
Tablet
Controls element corner roundness using utility classes.
These are helpful when you need to customize or reset corners without affecting the base component class.
Use the [Utility] Radius Size format to control element corner roundness.
The Size follows t-shirt sizing convention: SM, MD, LG, XL, Round
Example: [Utility] Radius LG
These utilities give you full control when working with overlapping sections, containers with flush corners, or when selectively removing roundness.
Use utility mask classes [Utility] Mask (Direction) to apply directional fades to images or elements. These are commonly paired with Overlay and Image
Apply one of the following as a combo class:
Example:
Image [Utility] Mask BottomOverlay classes are used to create translucent layers above content. They are commonly used to improve readability on background images or to emphasize text.
Link Overlay
Overlay with Mask
Combine Overlay with directional mask utility classes to create faded on a side images or faded overlays.
Example:
Add subtle or strong depth to elements using drop shadow utility classes.
These utility classes allow you to control alignment and color of text elements globally or responsively.
These utility classes are used to apply specific text colors to an element.
Text alignment utilities let you override the default left-aligned behavior.
Responsive modifiers:
Other utility helpers for visual effects and behaviors.