Tabs

Examples

Tabs render live from tabs.css via the .tabs container and .tab items. Exactly one tab carries .is-active, a white pill on the cream track.

<div class="tabs" role="tablist">
  <button class="tab is-active" role="tab" aria-selected="true">In-house</button>
  <button class="tab" role="tab" aria-selected="false">Agency</button>
  <button class="tab" role="tab" aria-selected="false">Growth</button>
</div>

Usage

Tabs let a reader flip between mutually-exclusive views of the same region without leaving the page.

• Use Tabs for 2-4 mutually-exclusive sibling views, personas, plan tiers, or content modes.
• Keep exactly one .is-active tab at a time; switching one off switches another on.
• Use real <button role="tab"> elements with aria-selected, never plain <div>s.
• Pair the container with role="tablist" and wire each tab to a panel with role="tabpanel".
• Don't use Tabs for primary navigation between pages, that's the navbar.

States

A tab moves through three states: default (quiet, secondary text), hover (text darkens), and active (.is-active, a white pill with a soft shadow).

The active state is JS-driven on real pages: on click, toggle .is-active and update aria-selected on the chosen tab while clearing them from its siblings.

Code

The .tabs and .tab classes ship in tabs.css. Add the stylesheet, then render the container and items.

<link rel="stylesheet" href="/_shared/components/tabs.css">

<div class="tabs" role="tablist">
  <button class="tab is-active" role="tab" aria-selected="true">In-house</button>
  <button class="tab" role="tab" aria-selected="false">Agency</button>
  <button class="tab" role="tab" aria-selected="false">Growth</button>
</div>

Toggle .is-active and aria-selected in JS on click.