Utilities

VoxBlocks ships a utility class layer for light-DOM content — quick spacing, typography, color, and layout adjustments without writing CSS. All classes are prefixed vox-, derive from the design tokens (so they follow theme overrides and dark mode), and use !important so they reliably win.

Included in voxblocks.css; nothing extra to load.

Size scale used by spacing and gap: none 0 · xs 0.25rem · sm 0.5rem · md 1rem · lg 1.5rem · xl 2rem · xxl 3rem.

Container

vox-container centers content at 1280px with responsive horizontal padding — the same measure vox-header and vox-footer already use internally. Wrap other page sections (vox-hero, vox-grid, prose) in it so they line up with the header and footer instead of running edge-to-edge.

<div class="vox-container"> <vox-hero heading="…">…</vox-hero> </div>

Spacing

Margin and padding: vox-{m|p}-{side}-{size} where side is top, bottom, start, end, left, right, x, y, or all.

<div class="vox-m-top-lg vox-p-all-md">…</div> <div class="vox-m-x-auto vox-max-width-md">centered column</div>

vox-m-x-auto centers block elements horizontally.

start and end follow the writing direction — start is the left in LTR and the right under dir="rtl". left and right always mean that side of the screen. Prefer start/end, and reach for left/right only when you genuinely mean a fixed screen edge regardless of language. See Internationalization for the full picture.

<!-- indents from the text's leading edge, in any language --> <div class="vox-m-start-lg">…</div>

Typography

Type scale vox-ts-{xs|sm|md|lg|xl|xxl|3xl} (12–36px), weight vox-text-{regular|medium|semibold|bold}, alignment vox-text-{start|center|end} (direction-aware) or vox-text-{left|right} (fixed), plus vox-text-uppercase, vox-text-mono, and line height vox-lh-{tight|base|loose}.

Extra-large bold text

Small uppercase label

Monospace text

<p class="vox-ts-xl vox-text-bold">Extra-large bold text</p> <p class="vox-ts-sm vox-text-uppercase vox-color-text-3">Small uppercase label</p>

Color

Text: vox-color-text-{1|2|3} (emphasis levels), vox-color-{brand|tip|warning|danger}. Background: vox-bg, vox-bg-{alt|soft|elv}, vox-bg-brand, vox-bg-{brand|tip|warning|danger}-soft.

<span class="vox-bg-brand-soft vox-color-brand">brand-soft</span>

An extended, non-themed palette is also available — vox-color-{hue}-{100-900} / vox-bg-{hue}-{100-900} across seven hues (gray, teal, blue, green, gold, red, purple). See Colors for the full swatch reference and contrast pairing guidance.

Border

vox-border-{all|top|bottom|start|end|left|right|none} (1px, divider color) and radius vox-radius-{sm|md|lg|full}. As with spacing, start/end follow the writing direction while left/right stay pinned to a screen edge.

<div class="vox-border-all vox-radius-lg vox-p-all-md">…</div>

Display

vox-display-{block|inline|inline-block|flex|inline-flex|grid} and vox-hide.

Flex

Direction vox-flex-{row|column}, wrapping vox-flex-{wrap|nowrap}, main axis vox-justify-{start|center|end|between}, cross axis vox-items-{start|center|end|stretch}, and per-item vox-grow-{0|1} / vox-shrink-0.

<div class="vox-display-flex vox-justify-between vox-items-center">…</div>

Gap

vox-gap-{none|xs|sm|md|lg|xl|xxl} — spacing between flex or grid children.

Shadow

vox-shadow-{1|2|none} using the token elevation values.

Visibility

• vox-hide — remove from layout.
• vox-sr-only — visually hidden, still announced by screen readers.
• Responsive: vox-hide-{sm|md|lg}-down hides at and below the breakpoint, vox-hide-{sm|md|lg}-up at and above. Breakpoints: sm 480px, md 768px, lg 1024px.

<span class="vox-hide-md-down">Only shown on wider screens</span> <span class="vox-sr-only">Screen-reader-only label</span>

Width

vox-width-{full|auto|sm|md|lg|xl} and vox-max-width-{sm|md|lg|xl|full} (20/30/40/50rem).

Z-index

vox-z-{0|10|100|1000}.