These utility classes actually have utility.
We aren't replicating CSS with classnames, but providing real functionality to be combined or used individually. If you want a common layout or pattern or even automatic color contrast, we've got you.
Auto-fill responsive card grid
Sidebar + main content (250px default)
Full-height sticky sidebar for app shells. Combine with .split.vertical for sidebar internal layout.
See UI Blocks for full layout templates.
50/50 two column layout
Stays side-by-side on mobile
Three equal columns
Max-width for optimal readability (default: start-aligned)
Learning to drop in on a skateboard is an exciting and challenging milestone for any skateboarder. Before attempting to drop in, ensure that you have a solid foundation of basic skateboarding skills.
Centered readable content with max-width constraint.
End-aligned readable content with max-width constraint.
Group and cluster your stuff in common ways.
Vertical flexbox stack with gap
Horizontal wrapping list with gap (perfect for tags, pills, breadcrumbs)
Flex with space-between and top alignment (used in header)
Vertical split - pushes first and last children to opposite ends
Display flex with 20px gap
Minimal grid utility (like .flex)
Max-width 900px container
This content is constrained to 900px max-width for optimal readability. Unlike .layout-readable, this doesn't include padding.
Remove list styling (margin, padding, list-style)
Circular element (default --size: 40px)
Add vertical margin (--vs-m)
Hide element visually but keep accessible to screen readers
There is hidden text after this colon: This text is hidden visually but available to screen readers!
You can't see it, but it's there for accessibility.
Automatically sets text color (light or dark) based on background luminosity
Set --bg-color and the text color adjusts automatically
Maintain specific aspect ratios for containers (useful for images, videos, cards)
Custom: Use aspect-ratio: 2 / 1; or aspect-ratio: var(--aspect-ratio);
Makes typography responsive to container width instead of viewport
Text scales with viewport width
Text scales with this box's width
Apply heading sizes to any element without semantic heading tags
.h1 - Largest heading size
.h2 - Second level
.h3 - Third level
.h4 - Fourth level
.h5 - Fifth level
.h6 - Sixth level
Fluid font size utilities using the --fl (fluid level) system
.fs-xs - Extra small (--fl: -1)
.fs-base - Base size (--fl: 0)
.fs-s - Small heading (--fl: 1)
.fs-m - Medium (--fl: 2)
.fs-l - Large (--fl: 3)
.fs-xl - Extra large (--fl: 4)
.fs-xxl - Double extra large (--fl: 5)
.fs-xxxl - Triple extra large (--fl: 6)