🏔️
Travel
Reach the summit
A reusable card with a media header, tag, title, copy, and a footer action row.
1 · Button
Primary, secondary, ghost, and a disabled state — plus sizes.
<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--ghost btn--sm">Ghost small</button>2 · Card
A flexible content container with an image, body, and actions.
<article class="ui-card">
<div class="ui-card__media">🏔️</div>
<div class="ui-card__body">
<span class="ui-card__tag">Travel</span>
<h3 class="ui-card__title">Reach the summit</h3>
<p class="ui-card__text">Short description…</p>
</div>
</article>3 · Modal
An accessible dialog with a backdrop, close button, and Esc-to-close.
<button data-modal-open="demo-modal">Open</button>
<div class="ui-modal" id="demo-modal" hidden>
<div class="ui-modal__box">…</div>
</div>4 · Form input
Labelled text field with helper text and a live validation state.
<div class="ui-field">
<label class="ui-field__label" for="email">Email</label>
<input class="ui-field__input" id="email" type="email" />
<span class="ui-field__help">Helper text</span>
</div>