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.

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