Buttons

Use buttons for actions. Choose the variant that matches the importance of the action. All buttons support hover, focus, active, and disabled states. Accessible via keyboard (Enter / Space).

<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--ghost">Ghost</button>
<button class="btn btn--primary btn--sm">Small</button>
<button class="btn btn--primary btn--lg">Large</button>
<button class="btn btn--primary" disabled>Disabled</button>

Links

Styled links for different contexts: default for inline content, subtle for secondary navigation, nav for primary navigation with active-page support via aria-current.

<a href="#" class="link">Default link</a>
<a href="#" class="link link--subtle">Subtle link</a>
<a href="#" class="link link--nav">Nav link</a>

Forms

Complete form system with labels, inputs, textareas, selects, hints, and validation. Custom checkbox, radio, and toggle controls are built with pure CSS. All controls are keyboard-accessible and use visible focus rings.

<div class="form-field">
  <label for="name" class="form-label">Name</label>
  <input type="text" id="name" class="form-input" placeholder="Enter your name">
  <span class="form-hint">Your full name.</span>
</div>

<label class="form-checkbox">
  <input type="checkbox">
  <span class="form-checkbox__indicator"></span>
  <span class="form-checkbox__label">I agree</span>
</label>

<label class="form-toggle">
  <input type="checkbox">
  <span class="form-toggle__track"></span>
  <span class="form-toggle__label">Notifications</span>
</label>

Cards

Content containers with optional header and footer. Variants: default (subtle border), elevated (shadow), outlined (visible border), and glass (frosted backdrop). Use <article> for semantic markup.

<article class="card card--elevated">
  <header class="card__header">
    <h3 class="card__title">Title</h3>
  </header>
  <div class="card__body"><p>Content</p></div>
  <footer class="card__footer">
    <button class="btn btn--primary">Action</button>
  </footer>
</article>

Alerts

Informational messages with semantic color coding. Always include role="alert" for screen reader announcements.

<div class="alert alert--info" role="alert">
  <span class="alert__icon" aria-hidden="true">&#8505;</span>
  <p class="alert__message">Informational message.</p>
</div>

Tables

Data tables with striped and bordered variants. Use semantic <thead> and <tbody> for accessibility.

<table class="table table--striped">
  <thead><tr><th>Name</th><th>Value</th></tr></thead>
  <tbody><tr><td>Data</td><td>Value</td></tr></tbody>
</table>

Accordion

Expandable sections using native <details> and <summary>. No JavaScript required. Keyboard-accessible with Enter and Space.

<div class="accordion">
  <details class="accordion__item">
    <summary class="accordion__header">Section Title</summary>
    <div class="accordion__content"><p>Content here.</p></div>
  </details>
</div>

Tabs

Tabbed content using radio inputs. Pure CSS, keyboard-navigable with arrow keys. Supports up to 5 panels.

<div class="tabs">
  <input type="radio" name="tabs" id="tab1" class="tabs__input" checked>
  <label for="tab1" class="tabs__label">Tab 1</label>
  <input type="radio" name="tabs" id="tab2" class="tabs__input">
  <label for="tab2" class="tabs__label">Tab 2</label>
  <div class="tabs__panels">
    <div class="tabs__panel">Content 1</div>
    <div class="tabs__panel">Content 2</div>
  </div>
</div>

Modal

Overlay dialog using :target. Opens via anchor link, closes by navigating away. Use role="dialog" and aria-modal="true".

<a href="#my-modal" class="btn btn--primary">Open</a>
<div id="my-modal" class="modal">
  <a href="#" class="modal__overlay" aria-hidden="true"></a>
  <div class="modal__content" role="dialog" aria-modal="true">
    <header class="modal__header">
      <h2 class="modal__title">Title</h2>
      <a href="#" class="modal__close" aria-label="Close">&times;</a>
    </header>
    <div class="modal__body"><p>Content</p></div>
    <footer class="modal__footer">
      <a href="#" class="btn btn--secondary">Cancel</a>
      <button class="btn btn--primary">Confirm</button>
    </footer>
  </div>
</div>

Badges

Small labels for status, counts, or categories.

<span class="badge badge--primary">Primary</span>
<span class="badge badge--success">Success</span>

Tooltip

Contextual information on hover or focus. Use aria-describedby to link the trigger to the tooltip content for screen readers.

<button class="tooltip" aria-describedby="tip1">
  Info
  <span class="tooltip__content" role="tooltip" id="tip1">Details</span>
</button>

Typography & Code

Blockquotes, inline code, code blocks, and keyboard shortcuts.

"Less is pure."

Use the --color-action variable for interactive elements. Press Ctrl + S to save.

<blockquote class="blockquote">
  <p>"Less is pure."</p>
  <footer class="blockquote__footer"><cite>Purissimo</cite></footer>
</blockquote>

<code class="code">inline code</code>
<kbd>Ctrl</kbd> + <kbd>S</kbd>

Navigation

Navbar and breadcrumb components. Use aria-label on <nav> and aria-current="page" on the active link.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Docs</a></li>
    <li aria-current="page">Components</li>
  </ol>
</nav>