Skip to content

Utilities

Spacing

Margin utilities for vertical rhythm. .mt-* sets margin-top and .mb-* sets margin-bottom; the suffix is the spacing token name.

Suffix Token Size
2xs --space-2xs 0.25rem
xs --space-xs 0.5rem
sm --space-sm 0.75rem
md --space-md 1rem
lg --space-lg 1.5rem
xl --space-xl 2rem
2xl --space-2xl 3rem
3xl --space-3xl 4rem
<p class="mb-lg">Paragraph with bottom margin.</p>
<div class="mt-xl">Section with top margin.</div>

Grid

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>

Fade in

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>

Visually hidden (a11y)

Hide content visually while keeping it accessible to screen readers.

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