Github Repo v1.0.1

Tabs


You can also have tabs without a .nav bar. Simply make a .tabs container and add links in it. To make tabs go full width just add a is-full class.

Examples

<nav class="tabs">
  <a>Tab 1</a>
  <a>Tab 2</a>
  <a class="active">Tab 3</a>
</nav>
<nav class="tabs full">
  <a>Tab 1</a>
  <a class="active">Tab 2</a>
  <a>Tab 3</a>
</nav>

Customize

Copy these styles for new projects to customize styling.

/* Tabs */
.tabs > a {
  padding: 1rem 2rem;
  color: #555;
  border-bottom: 2px solid var(--lightGrey-color);
}
.tabs > a.active,
.tabs > a:hover {
  opacity: 1;
  border-bottom: 2px solid #555;
}
.tabs > a.active {
  border-color: var(--primary-color);
}