Tabs

Tabs allow the user to quickly navigate between 2 to 4 views on the same screen. Each tab contains separate information related to the same topic. Use this component only when the tab content is not readable when displayed all at once.

The tab component consists of a container, a tab bar, text labels, and the tab content. In addition to the default state, the tab bar also has a hover state and a focus state. The selected and unselected states mark the active and inactive tabs, respectively.

Tab Label 1

Tab Label 2

This is the content for Tab 1.

This is the content for Tab 2.

Tabs require javascript to change the display on the c-tabs__content class and the c-tabs__tab--active class.

<div>
  <div class="c-tabs">
    <div class="c-tabs__tab c-tabs__tab--active">Tab Label 1</div>
    <div class="c-tabs__tab">Tab Label 2</div>      
  </div>
  <div class="c-tabs__content c-tabs__content--active l-padding-vertical--medium">
    <p class="c-text-content">This is the content for Tab 1.</p>
  </div>
  <div class="c-tabs__content l-padding-vertical--medium">
    <p class="c-text-content">This is the content for Tab 2.</p>
  </div>    
</div>

Copy

Accessibility

Content coming soon

Design Environment

Content coming soon