Tabs
Views of the same thing
Underline
Arrow keys move between tabs.
Overview content.
Activity content.
Settings content.
Code
<div class="tabs" role="tablist" data-tabs="tab-1">
<button class="tab" type="button" role="tab" id="tab-1-tab-0" aria-controls="tab-1-0" aria-selected="true" tabindex="0">Overview</button>
<button class="tab" type="button" role="tab" id="tab-1-tab-1" aria-controls="tab-1-1" aria-selected="false" tabindex="-1">Activity</button>
<button class="tab" type="button" role="tab" id="tab-1-tab-2" aria-controls="tab-1-2" aria-selected="false" tabindex="-1">Settings</button>
</div>
<div class="tab-panels">
<div class="tab-panel" id="tab-1-0" role="tabpanel" aria-labelledby="tab-1-tab-0" tabindex="0">
<p class="m-0 mt-4 text-label-2">Overview content.</p>
</div>
<div class="tab-panel" id="tab-1-1" role="tabpanel" aria-labelledby="tab-1-tab-1" hidden tabindex="0">
<p class="m-0 mt-4 text-label-2">Activity content.</p>
</div>
<div class="tab-panel" id="tab-1-2" role="tabpanel" aria-labelledby="tab-1-tab-2" hidden tabindex="0">
<p class="m-0 mt-4 text-label-2">Settings content.</p>
</div>
</div>With counts
12 open tickets.
48 closed tickets.
60 tickets in all.
Code
<div class="tabs" role="tablist" data-tabs="tab-2">
<button class="tab" type="button" role="tab" id="tab-2-tab-0" aria-controls="tab-2-0" aria-selected="true" tabindex="0">Open<span class="count">12</span></button>
<button class="tab" type="button" role="tab" id="tab-2-tab-1" aria-controls="tab-2-1" aria-selected="false" tabindex="-1">Closed<span class="count">48</span></button>
<button class="tab" type="button" role="tab" id="tab-2-tab-2" aria-controls="tab-2-2" aria-selected="false" tabindex="-1">All<span class="count">60</span></button>
</div>
<div class="tab-panels">
<div class="tab-panel" id="tab-2-0" role="tabpanel" aria-labelledby="tab-2-tab-0" tabindex="0">
<p class="m-0 mt-4 text-label-2">12 open tickets.</p>
</div>
<div class="tab-panel" id="tab-2-1" role="tabpanel" aria-labelledby="tab-2-tab-1" hidden tabindex="0">
<p class="m-0 mt-4 text-label-2">48 closed tickets.</p>
</div>
<div class="tab-panel" id="tab-2-2" role="tabpanel" aria-labelledby="tab-2-tab-2" hidden tabindex="0">
<p class="m-0 mt-4 text-label-2">60 tickets in all.</p>
</div>
</div>