Tabs are an easy way to fit lots of related content on a page without overwhelming the page with content.

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)

Founded on principles of excellence

Founded on principles of excellence, equality and opportunity for all, the University of York opened in 1963 with just 230 students.

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.

<div class="c-tabs c-tabs--horizontal  js-tabs">
  <ul role="tablist" class="c-tabs__nav">
    <li class="c-tabs__tab is-active"><a role="tab" aria-controls="about/test" class="c-tabs__link" href="#about/test" aria-selected="true">About the university</a></li>
    <li class="c-tabs__tab"><a role="tab" aria-controls="excellence" class="c-tabs__link" href="#excellence" aria-selected="false">Academic excellence</a></li>
    <li class="c-tabs__tab"><a role="tab" aria-controls="investing" class="c-tabs__link" href="#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)

Founded on principles of excellence

Founded on principles of excellence, equality and opportunity for all, the University of York opened in 1963 with just 230 students.

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.

<div class="c-tabs c-tabs--horizontal c-tabs--dark js-tabs">
  <ul role="tablist" class="c-tabs__nav">
    <li class="c-tabs__tab is-active"><a role="tab" aria-controls="about-2" class="c-tabs__link" href="#about-2" aria-selected="true">About the university</a></li>
    <li class="c-tabs__tab"><a role="tab" aria-controls="excellence-2" class="c-tabs__link" href="#excellence-2" aria-selected="false">Academic excellence</a></li>
    <li class="c-tabs__tab"><a role="tab" aria-controls="investing-2" class="c-tabs__link" href="#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.

Founded on principles of excellence

Founded on principles of excellence, equality and opportunity for all, the University of York opened in 1963 with just 230 students.

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.

<div class="c-tabs c-tabs--vertical  js-tabs">
  <ul role="tablist" class="c-tabs__nav">
    <li class="c-tabs__tab is-active"><a role="tab" aria-controls="about-3" class="c-tabs__link" href="#about-3" aria-selected="true">About the university</a></li>
    <li class="c-tabs__tab"><a role="tab" aria-controls="excellence-3" class="c-tabs__link" href="#excellence-3" aria-selected="false">Academic excellence</a></li>
    <li class="c-tabs__tab"><a role="tab" aria-controls="investing-3" class="c-tabs__link" href="#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>

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