Components

Molecules

Composed UI patterns built from atoms: alerts, breadcrumbs, pagination, and tabs. All use semantic color tokens. Interactive patterns (tabs) use minimal vanilla JS with no framework dependency.

Alert

Inline feedback messages. Four semantic variants map to brand status colors. Use the dismiss variant when the user can clear the message. 

<div class="alert alert--info" role="alert">
  <svg class="alert-icon" ...></svg>
  <div class="alert-body">
    <strong class="alert-title">Title</strong>
    <p class="alert-message">Description.</p>
  </div>
</div>

<!-- Variants: alert--info | alert--success | alert--warning | alert--error -->
<!-- Add dismiss button if dismissible -->

Breadcrumb

Wayfinding trail. The last item is the current page — mark it aria-current="page" and do not wrap it in an anchor. 

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item" aria-hidden="true">
      <span class="breadcrumb-sep"><svg ...></svg></span>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-current" aria-current="page">Current page</span>
    </li>
  </ol>
</nav>

Pagination

Page navigation for long lists. The active page uses aria-current="page". Disabled prev/next use aria-disabled="true". 

<nav class="pagination" aria-label="Page navigation">
  <button type="button" class="page-btn page-btn--nav" disabled>
    <svg ...></svg>
  </button>
  <button type="button" class="page-btn page-btn--active" aria-current="page">1</button>
  <button type="button" class="page-btn">2</button>
  <span class="page-ellipsis" aria-hidden="true">…</span>
  <button type="button" class="page-btn page-btn--nav">
    <svg ...></svg>
  </button>
</nav>

Tabs

Tabbed content panels. Uses role="tablist" / role="tab" / role="tabpanel" for full ARIA semantics. JS toggles aria-selected and panel visibility on click.

Overview content. This panel is active by default.

<div class="tabs">
  <div class="tab-list" role="tablist" aria-label="Section tabs">
    <button type="button" role="tab" class="tab tab--active"
      aria-selected="true" aria-controls="panel-a" id="tab-a">Tab A</button>
    <button type="button" role="tab" class="tab"
      aria-selected="false" aria-controls="panel-b" id="tab-b" tabindex="-1">Tab B</button>
  </div>
  <div class="tab-panel" role="tabpanel" id="panel-a" aria-labelledby="tab-a">
    Content A
  </div>
  <div class="tab-panel" role="tabpanel" id="panel-b" aria-labelledby="tab-b" hidden>
    Content B
  </div>
</div>