Utilities
Reusable classes we implement across projects to speed up development and maintain consistency.
Hidden Layouts
Layout utility classes used to hide elements by default, across selected breakpoints, or completely when required by native component structure.
Note: Element is hidden by default.
hidden-required is a standalone class used for required native elements that must stay in the component structure but should not be visible. For example, form elements may include labels or wrappers that cannot be removed, so this class hides them completely while keeping the component functional.
Note: Element is hidden by default.
Code
A wrapper used to contain embedded custom code within the layout.
Note: Element is hidden by default.
Overflow
-
mobile-portrait-overflow-visible
-
mobile-portrait-overflow-hidden
-
mobile-portrait-overflow-clip
-
mobile-portrait-overflow-scroll
-
mobile-portrait-overflow-auto
Position
Centered
mobile-portrait-position-center
Static
mobile-portrait-position-static
Relative
mobile-portrait-position-relative
Absolute
-
mobile-portrait-position-absolute
-
tablet-position-absolute-fill
-
mobile-position-absolute-fill
-
mobile-portrait-position-absolute-fill
-
tablet-position-absolute-left
-
mobile-position-absolute-left
-
mobile-portrait-position-absolute-left
-
tablet-position-absolute-top
-
mobile-position-absolute-top
-
mobile-portrait-position-absolute-top
-
tablet-position-absolute-right
-
mobile-position-absolute-right
-
mobile-portrait-position-absolute-right
-
tablet-position-absolute-bottom
-
mobile-position-absolute-bottom
-
mobile-portrait-position-absolute-bottom
Fixed
Elements have been hidden to prevent layout overlap.
-
mobile-portrait-position-fixed
-
tablet-position-fixed-fill
-
mobile-position-fixed-fill
-
mobile-position-fixed-fill
-
tablet-position-fixed-left
-
mobile-position-fixed-left
-
mobile-portrait-position-fixed-left
-
tablet-position-fixed-top
-
mobile-position-fixed-top
-
mobile-portrait-position-fixed-top
-
tablet-position-fixed-right
-
mobile-position-fixed-right
-
mobile-portrait-position-fixed-right
-
tablet-position-fixed-bottom
-
mobile-position-fixed-bottom
-
mobile-portrait-position-fixed-bottom
Sticky
-
mobile-portrait-position-sticky
-
tablet-position-sticky-left
-
mobile-position-sticky-left
-
mobile-portrait-position-sticky-left
-
tablet-position-sticky-top
-
mobile-position-sticky-top
-
mobile-portrait-position-sticky-top
-
tablet-position-sticky-right
-
mobile-position-sticky-right
-
mobile-portrait-position-sticky-right
-
tablet-position-sticky-bottom
-
mobile-position-sticky-bottom
-
mobile-portrait-position-sticky-bottom
Float
-
tablet-position-float-left
-
mobile-position-float-left
-
mobile-portrait-position-float-left
-
tablet-position-float-right
-
mobile-position-float-right
-
mobile-portrait-position-float-right
Effects
Hover Opacity
Partial
hover-opacity-increase-partial
-
hover-opacity-decrease-partial
Full
hover-opacity-increase-full
-
hover-opacity-decrease-full
Rotate
-45°
transform-rotate-negative-45
-90°
transform-rotate-negative-90
-135°
transform-rotate-negative-135
Flip
Horizontal
transform-flip-horizontal
Skew
X Right - XS
transform-skew-x-right-xs
3D Transform
3D transforms are provided as subtle, interactive, or flip-based presets. Perspective is applied to parent elements to control depth consistently across children. 3D transform presets define depth context only. Motion is always handled by interactions.
Subtle
Passive depth for cards, panels, and containers.
Interactive
Depth for elements that respond to user interaction.
Flip
Explicit 3D behavior where elements rotate past 90°.
Important: These presets are structural. They should be applied to a wrapper element, not animated directly.
Example:
card
└── transform-3d-interactive
└── card-content (animated via interaction)
This keeps:
- perspective consistent
- animations clean
- system predictable
Transition
Applies a consistent transition duration to all properties that change on an element, including color, opacity, size, position, and other visual states.
Filter
Applies visual effects directly to an element and all of its internal content. Unlike backdrop filters, these effects modify the element itself, including images, text, and nested components.
-
filter-brightness-elevated
-
filter-saturation-elevated
Backdrop Filter
Applies visual effects such as blur, brightness, or saturation to the area behind an element without affecting its foreground content. Use backdrop filter utilities to enhance depth, contrast, and layering while maintaining readability across responsive breakpoints.
Blur
backdrop-filter-blur-light
-
backdrop-filter-blur-medium
-
backdrop-filter-blur-heavy
Brightness
backdrop-filter-brightness-low
-
backdrop-filter-brightness-elevated
-
backdrop-filter-brightness-high
Saturation
backdrop-filter-saturation-muted
-
backdrop-filter-saturation-elevated
-
backdrop-filter-saturation-vivid
Contrast
backdrop-filter-contrast-soft
-
backdrop-filter-contrast-elevated
-
backdrop-filter-contrast-strong
Grayscale
backdrop-filter-grayscale-light
-
backdrop-filter-grayscale-medium
-
backdrop-filter-grayscale-full
Invert
backdrop-filter-invert-light
-
backdrop-filter-invert-medium
-
backdrop-filter-invert-full
Sepia
backdrop-filter-sepia-light
-
backdrop-filter-sepia-medium
-
backdrop-filter-sepia-Full
-
background-filter-hue-135
background-filter-hue-180
background-filter-hue-225
background-filter-hue-270
background-filter-hue-315
Z-Index
Reset
mobile-portrait-z-auto
is-absolute
mobile-portrait-z-auto
is-fixed
Disable Elements
A utility for disabling elements—apply it to any class to make the element inactive.