Tabs
Tabbed navigation is constructed of a wrapper with the .Tabs
class and an unorderded list with a .Tabs__nav-item
class on each list item. Tabs can also show corresponding data on click by adding the data-tab="MyData"
tag on a list item.
Tabbed Navigation
Primarily for page/view navigation areas.
- Caching
- Staging
- Backup
- Domain
- Advanced
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptate et quibusdam debitis saepe ab, ratione molestias! Error rem quos iure deserunt assumenda magni, veritatis tenetur, impedit repellat soluta numquam.
<section class="Tabs">
<ul class="Tabs__nav">
<li class="Tabs__nav-item">Default Tab</li>
<li class="Tabs__nav-item is-active">Active Tab</li>
<li class="Tabs__nav-item" data-tab="MyData">Data Toggle</li>
</ul>
<div class="Tab" data-tab="MyData">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</section>
Block Tabs
Primarily for use with tabbed areas with only 2 options.
- One
- Two
Tab One Content.
Tab Two Content.
<section class="Tabs Tabs--block">
<ul class="Tabs__nav">
<li class="Tabs__nav-item">Default Tab</li>
<li class="Tabs__nav-item is-active">Active Tab</li>
<li class="Tabs__nav-item" data-tab="MyData">Data Toggle</li>
</ul>
<div class="Tab" data-tab="MyData">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</section>
Button Tabs
Primarily for use with tabbed areas with 3 or more options.
<section class="Tabs Tabs--button">
<ul class="Tabs__nav">
<li class="Tabs__nav-item">Default Tab</li>
<li class="Tabs__nav-item is-active">Active Tab</li>
<li class="Tabs__nav-item" data-tab="MyData">Data Toggle</li>
</ul>
<div class="Tab" data-tab="MyData">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</section>