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

Basic Tabs

One
Two (disabled)
Three
Four
Five
Six
Seven
Eight
Nine
Ten
This is tab one
This is tab two
<div class="c-tabs">
  <div class="c-tabs__nav">
    <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">Two (disabled)</div>
      <div class="c-tab-heading">Three</div>
      <div class="c-tab-heading">Four</div>
      <div class="c-tab-heading">Five</div>
      <div class="c-tab-heading">Six</div>
      <div class="c-tab-heading">Seven</div>
      <div class="c-tab-heading">Eight</div>
      <div class="c-tab-heading">Nine</div>
      <div class="c-tab-heading">Ten</div>
    </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
<div class="c-tabs c-tabs">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">.c-tabs</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Default</div>
  </div>
</div>
<div class="c-tabs c-tabs--brand">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">.c-tabs--brand</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Default</div>
  </div>
</div>
<div class="c-tabs c-tabs--info">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">.c-tabs--info</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Default</div>
  </div>
</div>
<div class="c-tabs c-tabs--warning">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">.c-tabs--warning</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Default</div>
  </div>
</div>
<div class="c-tabs c-tabs--success">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">.c-tabs--success</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Default</div>
  </div>
</div>
<div class="c-tabs c-tabs--error">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">.c-tabs--error</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Default</div>
  </div>
</div>