Component

Tabs

The admin section tabs — mono uppercase, with a hot variant that fills the count in amber.

Preview

Three jobs are waiting for approval.

Code

<div data-mw-tabs>
  <div class="tabs">
    <button class="tab" data-mw-tab="pending" aria-selected="true">Pending <span class="tab-count">3</span></button>
    <button class="tab hot" data-mw-tab="today" aria-selected="false">Today <span class="tab-count">12</span></button>
    <button class="tab" data-mw-tab="done" aria-selected="false">Done</button>
  </div>
  <div data-mw-panel="pending" class="card" style="margin-top:12px">Three jobs are waiting for approval.</div>
  <div data-mw-panel="today" class="card" style="margin-top:12px" hidden>Twelve jobs were printed today.</div>
  <div data-mw-panel="done" class="card" style="margin-top:12px" hidden>Nothing archived this week.</div>
</div>

This component is interactive — include behaviors.js after your markup.

← Swatch Textarea →