Utilities

A small, intentional set of helpers — display, flex, text, overflow, width, and screen reader. Spacing lives on Spacing; this is not a full utility framework.

Classes

Categories shipped in src/css/components/utilities.css.

Screen reader

.sr-only / .visually-hidden

Display

.d-none, .d-block, .d-flex, .d-grid, .d-inline, .d-inline-flex, .d-sm-none, .d-sm-block (≥640px)

Flex

.flex-row, .flex-column, .flex-wrap, .items-center (default for icon+text), .items-baseline (mixed type), .items-start (wrapping labels), .items-end (layout feet only), .justify-between, .justify-center, .flex-1, .flex-shrink-0

Text

.text-start, .text-center, .text-end, .text-truncate, .text-muted, .fw-semibold, .fw-bold

Overflow / width

.overflow-hidden, .overflow-auto, .w-full, .w-auto, .min-w-0

Inline alignment

Components that pair icons with a single line of text default to align-items: center (buttons, badges, chips, links, cluster). Use .items-baseline when mixed font sizes must share a text line, .items-start when a control sits beside wrapping copy, and .items-end only to pin content to the bottom of a tall container — not as a default for inline text.

Center (default)

.d-flex.items-center — icon + label.

Centered with icon

Baseline

.items-baseline — mixed type sizes.

LABEL Value

Start

.items-start — control + wrapping text.

• Longer supporting copy that wraps to a second line stays top-aligned.

Preview

Live

Toolbar A B

Muted supporting copy via .text-muted.

Truncated: a long line that should ellipsis when space runs out.

Visible label plus screen-reader-only detail for assistive tech 

<div class="d-flex items-center justify-between w-full">
  <span class="fw-semibold">Toolbar</span>
  …
</div>
<p class="text-muted">Supporting copy</p>
<span class="sr-only">Screen reader only</span>

Examples

Flex row

.d-flex + .items-center + .gap-2 (gap from Spacing).

One Two Three

Flex column

.d-flex + .flex-column.

Top Bottom

Text align

Logical start / center / end.

Start

Center

End

Weights

.fw-semibold (600) and .fw-bold (700).

Semibold label

Bold emphasis

Hide / show (sm)

.d-sm-none hides from 640px up; .d-sm-block shows then.

Mobile only ≥640px only

min-w-0

Lets flex children shrink and truncate instead of overflowing.

Tag Long flex child that truncates

Accessibility

  • Use .sr-only / .visually-hidden for text that must stay in the accessibility tree but not on screen (e.g. icon-button names, extra context).
  • Do not use .d-none for content that should remain available to assistive tech — hidden with display: none is removed from the a11y tree.
  • Prefer visible labels; reserve screen-reader-only text for genuinely redundant visual cues.
  • .text-start / .text-end use logical alignment and stay RTL-safe.

API

HTML classes

Class Description
.sr-only / .visually-hidden Clip pattern — visually hidden, available to AT.
.d-none … .d-grid Display values (none, inline, block, flex, inline-flex, grid).
.d-sm-none / .d-sm-block Display overrides from min-width: 640px.
.flex-* / .items-* / .justify-* Flex direction, wrap, alignment, grow, shrink.
.text-* / .fw-* Alignment, truncate, muted color, font weight.
.overflow-* hidden or auto.
.w-full / .w-auto / .min-w-0 Width helpers for full, auto, and flex truncation.

React

CSS-only — no React wrappers. Pass class names via className.