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.

  • 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 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>