Utilities

Utilities are the final adjustment layer. If you need spacing nudges, text sizing, alignment, color helpers, borders, shadows, or responsive visibility helpers, they live here. If the page becomes a wall of utilities, move the decision back into layout, primitives, or patterns.

Utility families

display flex gap margin padding text font color border shadow position visibility

Common finishing helpers

Family	Examples	Use them for
Spacing	`wb-mt-4`, `wb-mb-2`, `wb-p-4`, `wb-px-6`, `wb-py-4`	Small local spacing corrections.
Typography	`wb-text-sm`, `wb-text-xl`, `wb-text-end`, `wb-font-semibold`, `wb-mono`	Text size, alignment, and weight adjustments that should win over component defaults.
Flex and gap	`wb-flex`, `wb-items-center`, `wb-justify-between`, `wb-gap-3`	Refine alignment inside an existing primitive.
Color	`wb-text-muted`, `wb-text-danger`, `wb-bg-surface-2`	Small visual emphasis changes without custom CSS.
Visibility	`wb-hidden`, `wb-visible-mobile`, `wb-visible-desktop`, `wb-sr-only`	Hide, reveal, or improve accessibility.

Healthy utility usage

Logical alignment is preferred Use wb-text-start and wb-text-end for new work. wb-text-left and wb-text-right remain as compatibility aliases. Utility classes are expected to override component defaults in normal usage.

<div class="wb-card wb-mt-4">
  <div class="wb-card-header wb-flex wb-items-center wb-justify-between wb-gap-3">
    <strong class="wb-text-lg">Activity</strong>
    <span class="wb-badge wb-badge-success wb-badge-dot">Live</span>
  </div>
  <div class="wb-card-body wb-p-4">...</div>
</div>

Activity Live

The card and badge are still doing the real work. The utilities only refine spacing and alignment.

Typography and spacing helpers

Text scale

wb-text-xs

wb-text-sm

wb-text-base

wb-text-lg

wb-text-xl

wb-text-2xl

Weight, color, and truncation

wb-font-semibold

wb-font-bold + wb-text-danger

wb-mono

wb-truncate keeps a long line from breaking a compact layout surface.

Logical text alignment

wb-text-start

wb-text-center

wb-text-end

Table action alignment

Page	Status	Actions
About	Live	Edit
Pricing	Draft

Display, position, and visibility

Display

wb-hidden, wb-block, wb-inline-flex, wb-grid-display

Position

wb-relative, wb-absolute, wb-fixed, wb-sticky, wb-inset-0

Responsive visibility

wb-visible-mobile, wb-visible-desktop, wb-hidden-sm, wb-hidden-md, wb-hidden-lg

Utility boundary If you need many utility classes to make a primitive look correct, the underlying primitive, shell, or pattern choice is probably wrong.