Individual tabs can be referenced by the page hash.

Tabs will automatically expand to fit to 100% of the width of the container.

Horizontal tabs (default)

<div class="c-tabs c-tabs--horizontal  js-tabs">
  <ul role="tablist" class="c-tabs__nav">
    <li role="presentation" class="c-tabs__tab is-active">
      <a class="c-tabs__link" href="#about/test" role="tab" aria-controls="about/test" aria-selected="true">About the university</a>
    </li>
    <li role="presentation" class="c-tabs__tab">
      <a class="c-tabs__link" href="#excellence" role="tab" aria-controls="excellence" aria-selected="false">Academic excellence</a>
    </li>
    <li role="presentation" class="c-tabs__tab">
      <a class="c-tabs__link" href="#investing" role="tab" aria-controls="investing" aria-selected="false">Investing in our campus</a>
    </li>
  </ul>
  <div class="c-tabs__container">
    <div role="tabpanel" class="c-tabs__content is-active" aria-hidden="false" id="about/test">
      <h3>Founded on principles of excellence</h3>
      <p>Founded on principles of excellence, equality and opportunity for all, the University of York opened in 1963 with just 230 students.</p>
      <p>Since then we have become one of the world's leading universities, carving out a reputation as an academic powerhouse where a clear focus on excellence has secured national and international recognition alongside longer established institutions.</p>
    </div>
    <div role="tabpanel" class="c-tabs__content" aria-hidden="true" id="excellence">
      <h3>A member of the elite Russell Group of universities</h3>
      <p>We are a dynamic, research-intensive university committed to the development of life-saving discoveries and new technologies to tackle some of the most pressing global challenges.</p>
      <p>There are now over 30 academic departments and research centres and the student body has expanded to nearly 16,000.</p>
      <ul>
        <li><a href="#">Research at York</a></li>
        <li><a href="#">Studying at York</a></li>
        <li><a href="#">Mission and strategies: the University Plan 2009-19</a></li>
      </ul>
    </div>
    <div role="tabpanel" class="c-tabs__content" aria-hidden="true" id="investing">
      <h3>Vision for a 21st-century campus</h3>
      <p>The University is in the middle of an unprecedented period of expansion and renewal. Since 2000, we have invested in 20 new buildings on the original Heslington West campus and have completed the first and second phases of a £750m campus expansion at Heslington East.</p>
      <p>Our investment in new colleges, teaching and learning space, laboratories, research facilities and a new sport village mean it has never been a better time to join our student body or research groups at York.</p>
    </div>
  </div>
</div>

Horizontal tabs (dark)

<div class="c-tabs c-tabs--horizontal c-tabs--dark js-tabs">
  <ul role="tablist" class="c-tabs__nav">
    <li role="presentation" class="c-tabs__tab is-active">
      <a class="c-tabs__link" href="#about-2" role="tab" aria-controls="about-2" aria-selected="true">About the university</a>
    </li>
    <li role="presentation" class="c-tabs__tab">
      <a class="c-tabs__link" href="#excellence-2" role="tab" aria-controls="excellence-2" aria-selected="false">Academic excellence</a>
    </li>
    <li role="presentation" class="c-tabs__tab">
      <a class="c-tabs__link" href="#investing-2" role="tab" aria-controls="investing-2" aria-selected="false">Investing in our campus</a>
    </li>
  </ul>
  <div class="c-tabs__container">
    <div role="tabpanel" class="c-tabs__content is-active" aria-hidden="false" id="about-2">
      <h3>Founded on principles of excellence</h3>
      <p>Founded on principles of excellence, equality and opportunity for all, the University of York opened in 1963 with just 230 students.</p>
      <p>Since then we have become one of the world's leading universities, carving out a reputation as an academic powerhouse where a clear focus on excellence has secured national and international recognition alongside longer established institutions.</p>
    </div>
    <div role="tabpanel" class="c-tabs__content" aria-hidden="true" id="excellence-2">
      <h3>A member of the elite Russell Group of universities</h3>
      <p>We are a dynamic, research-intensive university committed to the development of life-saving discoveries and new technologies to tackle some of the most pressing global challenges.</p>
      <p>There are now over 30 academic departments and research centres and the student body has expanded to nearly 16,000.</p>
      <ul>
        <li><a href="#">Research at York</a></li>
        <li><a href="#">Studying at York</a></li>
        <li><a href="#">Mission and strategies: the University Plan 2009-19</a></li>
      </ul>
    </div>
    <div role="tabpanel" class="c-tabs__content" aria-hidden="true" id="investing-2">
      <h3>Vision for a 21st-century campus</h3>
      <p>The University is in the middle of an unprecedented period of expansion and renewal. Since 2000, we have invested in 20 new buildings on the original Heslington West campus and have completed the first and second phases of a £750m campus expansion at Heslington East.</p>
      <p>Our investment in new colleges, teaching and learning space, laboratories, research facilities and a new sport village mean it has never been a better time to join our student body or research groups at York.</p>
    </div>
  </div>
</div>

Vertical tabs

You can also place tabs vertically, and just add .c-tabs--vertical to the tab container.

<div class="c-tabs c-tabs--vertical  js-tabs">
  <ul role="tablist" class="c-tabs__nav">
    <li role="presentation" class="c-tabs__tab is-active">
      <a class="c-tabs__link" href="#about-3" role="tab" aria-controls="about-3" aria-selected="true">About the university</a>
    </li>
    <li role="presentation" class="c-tabs__tab">
      <a class="c-tabs__link" href="#excellence-3" role="tab" aria-controls="excellence-3" aria-selected="false">Academic excellence</a>
    </li>
    <li role="presentation" class="c-tabs__tab">
      <a class="c-tabs__link" href="#investing-3" role="tab" aria-controls="investing-3" aria-selected="false">Investing in our campus</a>
    </li>
  </ul>
  <div class="c-tabs__container">
    <div role="tabpanel" class="c-tabs__content is-active" aria-hidden="false" id="about-3">
      <h3>Founded on principles of excellence</h3>
      <p>Founded on principles of excellence, equality and opportunity for all, the University of York opened in 1963 with just 230 students.</p>
      <p>Since then we have become one of the world's leading universities, carving out a reputation as an academic powerhouse where a clear focus on excellence has secured national and international recognition alongside longer established institutions.</p>
    </div>
    <div role="tabpanel" class="c-tabs__content" aria-hidden="true" id="excellence-3">
      <h3>A member of the elite Russell Group of universities</h3>
      <p>We are a dynamic, research-intensive university committed to the development of life-saving discoveries and new technologies to tackle some of the most pressing global challenges.</p>
      <p>There are now over 30 academic departments and research centres and the student body has expanded to nearly 16,000.</p>
      <ul>
        <li><a href="#">Research at York</a></li>
        <li><a href="#">Studying at York</a></li>
        <li><a href="#">Mission and strategies: the University Plan 2009-19</a></li>
      </ul>
    </div>
    <div role="tabpanel" class="c-tabs__content" aria-hidden="true" id="investing-3">
      <h3>Vision for a 21st-century campus</h3>
      <p>The University is in the middle of an unprecedented period of expansion and renewal. Since 2000, we have invested in 20 new buildings on the original Heslington West campus and have completed the first and second phases of a £750m campus expansion at Heslington East.</p>
      <p>Our investment in new colleges, teaching and learning space, laboratories, research facilities and a new sport village mean it has never been a better time to join our student body or research groups at York.</p>
    </div>
  </div>
</div>

Accessibility notes

Headings in tab content

In a user testing session the UX team discovered that one participant using a screen magnifier couldn't see the full row of tab and therefore couldn't tell which tab they were currently looking at.

Takeaway: consider how your tabs will look if a user is using a screen reader or increasing the text size in their browser. Adding a heading in each content area matching its tab title will provide them, if not others too, with a clearer framing of the tab content.

Options

Atoms

• tabs
  • id: the _id_ of the tab - used for identifying the tab content and updating the URL hash (required)
  • title: the text to appear in the tab nav (required)
  • content: A string of HTML to appear in the tab content (required) TODO: can be a collection of components

Molecules

• tabbed-content
  • type: either horizontal or vertical
  • mode: dark (horizontal tabs only)
  • tabs: an array of tabs