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>
Skip link (a11y)¶
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>