Tabs
Tabs are a secondary navigation element used to organise content, allowing users to quickly navigate between different views or types of information in a single container.
Base
Use tabs to alternate among related views within the same context.
<ul class="c-tabs">
<li class="c-tab-item">
<a class="c-tab-item-link" href="">Rock</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link c-tab-item-link-active" href="">Paper</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href="">Scissors</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href="">Spock</a>
</li>
</ul>HTML
Fullwidth to stretch the entire container
<ul class="c-tabs c-tabs-fullwidth">
<li class="c-tab-item">
<a class="c-tab-item-link" href>
<i class="fas fa-hand-rock" aria-hidden="true"></i> Rock
</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link c-tab-item-link-active" href>
<i class="fas fa-hand-paper" aria-hidden="true"></i> Paper
</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href>
<i class="fas fa-hand-scissors" aria-hidden="true"></i> Scissors
</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href>
<i class="fas fa-hand-spock" aria-hidden="true"></i> Spock
</a>
</li>
</ul>HTML
Additional Sizes
Using additional sizes can help tighter layouts or with another element such as cards.
Small
<ul class="c-tabs c-tabs-sm">
<li class="c-tab-item">
<a class="c-tab-item-link" href="">Rock</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link c-tab-item-link-active" href="">Paper</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href="">Scissors</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href="">Spock</a>
</li>
</ul>HTML
Large
<ul class="c-tabs c-tabs-lg">
<li class="c-tab-item">
<a class="c-tab-item-link" href="">Rock</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link c-tab-item-link-active" href="">Paper</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href="">Scissors</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href="">Spock</a>
</li>
</ul>HTML
Alignment
By default tabs are left aligned. Additional classes provide center and right alignment options.
Center
<ul class="c-tabs c-tabs-center">
<li class="c-tab-item">
<a class="c-tab-item-link" href>
<i class="fas fa-hand-rock" aria-hidden="true"></i> Rock
</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link c-tab-item-link-active" href>
<i class="fas fa-hand-paper" aria-hidden="true"></i> Paper
</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href>
<i class="fas fa-hand-scissors" aria-hidden="true"></i> Scissors
</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href>
<i class="fas fa-hand-spock" aria-hidden="true"></i> Spock
</a>
</li>
</ul>HTML
Right
<ul class="c-tabs c-tabs-right">
<li class="c-tab-item">
<a class="c-tab-item-link" href>
<i class="fas fa-hand-rock" aria-hidden="true"></i> Rock
</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link c-tab-item-link-active" href>
<i class="fas fa-hand-paper" aria-hidden="true"></i> Paper
</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href>
<i class="fas fa-hand-scissors" aria-hidden="true"></i> Scissors
</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href>
<i class="fas fa-hand-spock" aria-hidden="true"></i> Spock
</a>
</li>
</ul>HTML
Additional Styles/Options
Bordered
<ul class="c-tabs c-tabs-bordered">
<li class="c-tab-item">
<a class="c-tab-item-link" href>
<i class="fas fa-hand-rock" aria-hidden="true"></i> Rock
</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link c-tab-item-link-active" href>
<i class="fas fa-hand-paper" aria-hidden="true"></i> Paper
</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href>
<i class="fas fa-hand-scissors" aria-hidden="true"></i> Scissors
</a>
</li>
<li class="c-tab-item">
<a class="c-tab-item-link" href>
<i class="fas fa-hand-spock" aria-hidden="true"></i> Spock
</a>
</li>
</ul>HTML
