Components

Tabs

Tabs within a page show one body of content at a time and may imply a sequence to the items.

Each .c-tabs__content-item should have a unique id and the .c-tabs__item link should link to the relevant id. The order of tab item links should be consistent with the order of the tab content items.

It is advised that you automate the id and href link to the relevant id to ensure there are never duplicates on a page. This will be setup automatically in Drupal if you use the Auto Heading IDs module.

JavaScript class: .js-tabs

This tab is active class="active"

Tour content

Activities content

Events content

<div class="c-tabs js-tabs">
  <nav class="c-tabs__menu" aria-label="Tabs">
    <ul class="c-tabs__list" id="myTab">
      <li class="c-tabs__item active"><a href="#talks" aria-controls="talks" class="c-tabs__link" role="tab" data-toggle="tab">Talks</a></li>
      <li class="c-tabs__item"><a href="#tours" aria-controls="tour" class="c-tabs__link" role="tab" data-toggle="tab">Tours</a></li>
      <li class="c-tabs__item"><a href="#activities" aria-controls="activities" class="c-tabs__link" role="tab" data-toggle="tab">Activities</a></li>
      <li class="c-tabs__item"><a href="#events" aria-controls="events" class="c-tabs__link" role="tab" data-toggle="tab">All Events</a></li>
    </ul>
  </nav>
  <div class="c-tabs__content">
    <div role="tabpanel" class="c-tabs__content-item active" id="talks">
      <p>This tab is active class="active"</p>
    </div>
    <div role="tabpanel" class="c-tabs__content-item" id="tours">
      <p>Tour content</p>
    </div>
    <div role="tabpanel" class="c-tabs__content-item" id="activities">
      <p>Activities content</p>
    </div>
    <div role="tabpanel" class="c-tabs__content-item" id="events">
      <p>Events content</p>
    </div>
  </div>
</div>