Tabs
One .tabs container, two looks: underline (the default, for page-level views) and pills (for compact switchers inside cards). Active state comes from aria-current, aria-selected, or .is-active — the CSS accepts all three.
Underline
Simple
With icons
With badges
Full-width
<nav class="tabs" aria-label="Tabs"> <a href="…" class="tab" aria-current="page">Overview</a> <a href="…" class="tab">Activity</a> </nav>
Pills
Simple
On a sunken surface
As tablist buttons
<nav class="tabs tabs-pills" role="tablist"> <button class="tab" role="tab" aria-selected="true">Errors</button> <button class="tab" role="tab" aria-selected="false">Warnings</button> </nav>
Bar with underline — tabs in a card header
The tab row sits flush against the card's own border — pass
style="border-bottom: none" (or a utility) so the borders don't double up.