CSS Utilities
Preset CSS utility classes that let you efficiently customize styles and layouts for components and native elements alike.
Instead of hand-writing the same CSS over and over, reach for a utility class and your theme takes care of the rest. CSS utilities pull directly from your Web Awesome theme and design tokens, so colors, typography, rounding, and spacing stay consistent with every component on the page. They're framework-agnostic, work on any native HTML element, and can be combined freely.
Using CSS Utilities
CSS utilities ship as part of webawesome.css, so if you're already including that stylesheet you don't need to import
anything else. Otherwise, follow these instructions to include the utilities stylesheet on its own.
Add the following stylesheet to the <head> section of your pages:
html <link rel="stylesheet" href="https://ka-f.webawesome.com/webawesome@0.17.0/styles/utilities.css">
After installing @awesome.me/webawesome, import the following stylesheet into your app:
js import '@awesome.me/webawesome/dist/styles/utilities.css';
Add the following stylesheet to the <head> section of your pages:
html <link rel="stylesheet" href="/dist/styles/utilities.css">
If you're using a hosted project, CSS utilities can be toggled on from your project settings.
1. Head over to your project's
Style Utilities
Preset rules for customizing colors, typography, rounding, and more — framework-agnostic and composable on any element.
Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
Native styles apply your theme to native HTML elements so they match the look and feel of Web Awesome components.
The wa-prose utility applies hierarchical, asymmetric typographic rhythm to long-form content like documentation, articles, and marketing copy.
Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
Border radius utilities set an element's border radius property.
Text utility classes use custom properties from your Web Awesome theme and other standard CSS properties to style text elements on the fly.
The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
Layout Utilities
Named layouts like wa-stack, wa-cluster,
wa-split, wa-flank, wa-frame, and
wa-grid — plus property-level helpers for gap, alignment, and wrap — that organize
content responsively without custom CSS.
Control cross-axis alignment in flex and grid containers with align-items and align-self utility classes.
Use the wa-cluster class to arrange elements inline with even spacing, allowing items to wrap when space is limited.
Use the wa-flank class to position two items side-by-side, with one item positioned alongside, or flanking, content that stretches to fill the available space.
Flex wrap utilities specify how items within flex containers wrap.
Use the wa-frame class to create a responsive container with consistent proportions to enclose content.
Gap utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
Use the wa-grid class to arrange elements into rows and columns that automatically adapt to the available space.
Justify content utilities determine how space is distributed between items in flex and grid containers.
Use the wa-split class to distribute two or more items evenly across available space, either in a row or a column.
Use wa-stack to arrange elements in the block direction with even spacing.