Tabs
Views of the same thing
Underline
Arrow keys move between tabs.
Overview content.
Activity content.
Settings content.
Code
<div class="tabs" role="tablist">
<button class="tab active" type="button" role="tab" id="tab-1-tab-0" aria-controls="tab-1-0" aria-selected="true" data-bs-toggle="tab" data-bs-target="#tab-1-0">Overview</button>
<button class="tab" type="button" role="tab" id="tab-1-tab-1" aria-controls="tab-1-1" aria-selected="false" data-bs-toggle="tab" data-bs-target="#tab-1-1">Activity</button>
<button class="tab" type="button" role="tab" id="tab-1-tab-2" aria-controls="tab-1-2" aria-selected="false" data-bs-toggle="tab" data-bs-target="#tab-1-2">Settings</button>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" 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-pane fade" id="tab-1-1" role="tabpanel" aria-labelledby="tab-1-tab-1" tabindex="0">
<p class="m-0 mt-4 text-label-2">Activity content.</p>
</div>
<div class="tab-pane fade" id="tab-1-2" role="tabpanel" aria-labelledby="tab-1-tab-2" 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">
<button class="tab active" type="button" role="tab" id="tab-2-tab-0" aria-controls="tab-2-0" aria-selected="true" data-bs-toggle="tab" data-bs-target="#tab-2-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" data-bs-toggle="tab" data-bs-target="#tab-2-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" data-bs-toggle="tab" data-bs-target="#tab-2-2">All<span class="count">60</span></button>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" 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-pane fade" id="tab-2-1" role="tabpanel" aria-labelledby="tab-2-tab-1" tabindex="0">
<p class="m-0 mt-4 text-label-2">48 closed tickets.</p>
</div>
<div class="tab-pane fade" id="tab-2-2" role="tabpanel" aria-labelledby="tab-2-tab-2" tabindex="0">
<p class="m-0 mt-4 text-label-2">60 tickets in all.</p>
</div>
</div>