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>

Colours

.tabs--primary
Disabled
Default
.tabs--secondary
Disabled
Default
.tabs--success
Disabled
Default
.tabs--error
Disabled
Default

Animation

Tab one
Tab two

.a-tabs

Apply the .a-tabs class to the .c-tabs block to enable animation on the tab headings elements.

--slow, --fast

Every animation comes with slow and fast modifiers.