Utilities¶

Spacing¶

Margin utilities for vertical rhythm.

<p class="mb-lg">Paragraph with bottom margin.</p>
<div class="mt-xl">Section with top margin.</div>

Two-column grid that collapses to single column on mobile.

Left column

Right column

<div class="grid">
  <div class="card">Left column</div>
  <div class="card">Right column</div>
</div>

Entry animation that fades up from below. Plays once on page load.

<div>Content animates in on page load.</div>

Navigation shortcut for keyboard users. Hidden until focused.

<body>
  <a href="#main-content" class="a11y-skip-link">Skip to content</a>
  <main id="main-content">...</main>
</body>

Hide content visually while keeping it accessible to screen readers.

<button>
  <span data-icon="menu"></span>
  <span class="visually-hidden">Open menu</span>
</button>