Tabs

Tabs (.tabs) let users switch between panels of content without leaving the page, following the standard WAI-ARIA tabs pattern. Only one panel is visible at a time — flickui.js manages aria-selected, tabindex, and the hidden attribute on selection.

Overview content.

<div class="tabs">
  <div class="tabs-tablist" role="tablist">
    <button type="button" class="tabs-tab action-select" id="t-overview" role="tab" aria-selected="true" aria-controls="p-overview" tabindex="0">Overview</button>
    <button type="button" class="tabs-tab action-select" id="t-activity" role="tab" aria-selected="false" aria-controls="p-activity" tabindex="-1">Activity</button>
    <span class="tabs-indicator" aria-hidden="true"></span>
  </div>
  <div class="tabs-panels">
    <div class="tabs-panel" id="p-overview" role="tabpanel">Overview content.</div>
    <div class="tabs-panel" id="p-activity" role="tabpanel" hidden>Activity content.</div>
  </div>
</div>