Tabs

Default tabs

HTML


<div class="orc-c-tabs  orc-js-tabs">

  <ul class="orc-c-tabs__list">

    <li class="orc-c-tabs__item">
      <a href="#tab-panel-1" class="orc-c-tabs__link orc-js-tab">Tab 1</a>
    </li>
    <!-- end orc-c-tabs__item -->
    <li class="orc-c-tabs__item">
      <a href="#tab-panel-2" class="orc-c-tabs__link orc-js-tab">Tab 2</a>
    </li>
    <!-- end orc-c-tabs__item -->
    <li class="orc-c-tabs__item">
      <a href="#tab-panel-3" class="orc-c-tabs__link orc-js-tab">Tab 3</a>
    </li>
    <!-- end orc-c-tabs__item -->
    <li class="orc-c-tabs__item">
      <a href="#tab-panel-4" class="orc-c-tabs__link orc-js-tab">Tab 4</a>
    </li>
    <!-- end orc-c-tabs__item -->
    <li class="orc-c-tabs__item">
      <a href="#tab-panel-5" class="orc-c-tabs__link orc-js-tab">Tab 5</a>
    </li>
    <!-- end orc-c-tabs__item -->
    <li class="orc-c-tabs__item">
      <a href="#tab-panel-6" class="orc-c-tabs__link orc-js-tab">Tab 6</a>
    </li>
    <!-- end orc-c-tabs__item -->

  </ul>
  <!-- end orc-c-tabs__list -->

  <div class="orc-c-tabs__body ">

    <div class="orc-c-tabs__panel orc-js-tabs-panel" id="tab-panel-1">
      <div class="orc-c-text-passage ">

        Tab 1 content

      </div>
      <!--end orc-c-text-passage-->

    </div>
    <div class="orc-c-tabs__panel orc-js-tabs-panel" id="tab-panel-2">
      <div class="orc-c-text-passage ">

        Tab 2 content

      </div>
      <!--end orc-c-text-passage-->

    </div>
    <div class="orc-c-tabs__panel orc-js-tabs-panel" id="tab-panel-3">
      <div class="orc-c-text-passage ">

        Tab 3 content

      </div>
      <!--end orc-c-text-passage-->

    </div>
    <div class="orc-c-tabs__panel orc-js-tabs-panel" id="tab-panel-4">
      <div class="orc-c-text-passage ">

        Tab 4 content

      </div>
      <!--end orc-c-text-passage-->

    </div>
    <div class="orc-c-tabs__panel orc-js-tabs-panel" id="tab-panel-5">
      <div class="orc-c-text-passage ">

        Tab 5 content

      </div>
      <!--end orc-c-text-passage-->

    </div>
    <div class="orc-c-tabs__panel orc-js-tabs-panel" id="tab-panel-6">
      <div class="orc-c-text-passage ">

        Tab 6 content

      </div>
      <!--end orc-c-text-passage-->

    </div>

  </div>
  <!-- end orc-c-tabs__body -->

</div>
<!-- end orc-c-tabs -->

When to use

Use to break up related, short content into buckets, particularly when there is not much space available for the content.

When to consider an alternative

Tabs are similar in function to accordions, though accordions are likely better for longer content.

Class Name	Description
`orc-c-tabs` Required	Apply to the tabs containing HTML element. This helps layout the content within the tabs component.
`orc-js-tabs` JS	Apply in addition to `orc-c-tabs` so that JS can target this element for tab functionality.
`orc-c-tabs__list` Required	Apply to `ul` tag to list out the various tabs. Set to `display: flex` to place tab items side by side.
`orc-c-tabs__item` Required	Apply to `li` tags within `orc-c-tabs__list` to represent each tab item.
`orc-c-tabs__link` Required	Apply to link within each `orc-c-tabs__item`. The `href` for this link should be set to this tab’s corresponding tab panel `id`.
`orc-js-tab` JS	Apply to `orc-c-tabs__link` so that JS can target this for functionality.
`orc-c-tabs__body` Required	Apply to the `div` that contains the tab panel of each tab. Helps with the layout of the content.
`orc-c-tabs__panel` Required	Apply to the `div` that contains the content of each tab. When JS is active, this content is hidden until the corresponding tab is selected. The `id` of this should match the `href` value after the `#` of the `orc-c-tabs__link`.
`orc-js-tabs-panel` JS	Added in addition to `orc-c-tabs__panel` so that JS can target this for functionality. All tabs panels are displayed until JS is activated for progressive enhancement.

Default tabs `orc-c-tabs`

Usage

When to use

When to consider an alternative