Tabs
Learn how to add tabs to your web pages.
Simple Tabs
Snippet:
<div role="tablist" class="tabs bb">
<a role="tab" aria-selected="true" class="tab-item active" title="First Tab" href="/first-tab">
<span>First Tab</span>
</a>
<a role="tab" aria-selected="false" class="tab-item" title="Second Tab" href="/second-tab">
<span>Second Tab</span>
</a>
</div>
By default, tabs don’t have a line at the bottom. You can add a .bb class to the .tabs to add it.
Tabs with Icons
Snippet:
<div role="tablist" class="tabs bb">
<a role="tab" aria-selected="true" class="tab-item active" title="Sent" href="/sent">
<svg class="icon" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2.016 21v-6.984l15-2.016-15-2.016V3l21 9z">
</path>
</svg>
<span>Sent</span>
</a>
<a role="tab" aria-selected="false" class="tab-item" title="Rejected" href="/rejected">
<svg class="icon" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-18C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm3 5.59-3 3-3-3L7.59 9l3 3-3 3L9 16.41l3-3 3 3L16.41 15l-3-3 3-3L15 7.59z">
</path>
</svg>
<span>Rejected</span>
</a>
</div>
Full-Width Tabs
Snippet:
<div role="tablist" class="tabs bb">
<a role="tab" aria-selected="true" class="tab-item active mr-0 flex-grow" title="First Tab" href="/first-tab">
<span>First Tab</span>
</a>
<a role="tab" aria-selected="false" class="tab-item mr-0 flex-grow" title="Second Tab" href="/second-tab">
<span>Second Tab</span>
</a>
<a role="tab" aria-selected="false" class="tab-item mr-0 flex-grow" title="Third Tab" href="/third-tab">
<span>Third Tab</span>
</a>
</div>
You can add a .flex-grow class to each tab to make it grow horizontally. Also, remove spacing between tabs by adding .mr-0 to each tab.