Tabs

Tabbed content, useful to toggle between content without jumping around the page or across pages.

Basic Tabs

One
Disabled
Three
This is tab one
This is tab two
<div class="c-tabs">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">One</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Inactive</div>
  </div>
  <div class="c-tabs__tab c-tabs__tab--active">This is tab one</div>
  <div class="c-tabs__tab">This is tab two</div>
</div>

colors

.c-tabs
Disabled
Default
.c-tabs--brand
Disabled
Default
.c-tabs--info
Disabled
Default
.c-tabs--warning
Disabled
Default
.c-tabs--success
Disabled
Default
.c-tabs--error
Disabled
Default