Tabs

Tabs are used when there are multiple sections of content that we want to showcase in the same space. For example, we may have search results which are broken down by topic. These topics are available at the click of a button at the top of the search results, allowing a user to get to the topic that is most relevant to them as quickly as possible.

Showcased below is a normal tab is and an active tab (or the selected tab). Ideally one tab should always be active by default, based on the content we’d most expect a user to want to see first. Tabs can be both centrally aligned and left-aligned. They are always aligned horizontally to one another, never vertically. When there are too many tabs to show on one screen (such as on a smaller device) the tabs become horizontally scrollable. Tabs are spaced by always using the bottom border as a way of aligning the tabs flush to one another, even if the default tabs have a transparent bottom border rather than a ‘Brand1’ border in the case of the active tab. Tabs can be created using the data-toggle-group attribute. Each toggle within the group must have a data-toggle attribute which will target an element with the corresponding ID. Toggle group will accept the values data-toggle-group="mobile" and data-toggle-group="desktop". This will restrict the initialisation of the component to the specified screen size.

Title of tab 1

In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam.
Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper parturient montes erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.

Title of tab 2

In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper parturient montes erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.

Title of tab 3

In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam.
Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, erat velit sit amet neque. augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.

Title of tab 4

In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam.
Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, lorem sodales mi, ut ullamcorper parturient montes erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.

Title of tab 5

Nullam sed fermentum tortor, eget fermentum diam. In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper parturient montes erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.

Title of tab 6

In vitae mi vitae elit. Nullam sed fermentum tortor, eget fermentum diam.
Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, erat velit sit amet neque. augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.

html
            <div>
  <div class="rc-fade--x" data-toggle-group>
    <ul class="rc-scroll--x rc-list rc-list--inline rc-list--align rc-list--blank" role="tablist">
      <li>
        <button class="rc-tab rc-btn" data-toggle="tab__panel-1" role="tab">Tab label</button>
      </li>
      <li>
        <button class="rc-tab rc-btn" data-toggle="tab__panel-2" role="tab">Tab label</button>
      </li>
      <li>
        <button class="rc-tab rc-btn" data-toggle="tab__panel-3" role="tab">Tab label</button>
      </li>
      <li>
        <button class="rc-tab rc-btn" data-toggle="tab__panel-4" role="tab">Tab label</button>
      </li>
      <li>
        <button class="rc-tab rc-btn" data-toggle="tab__panel-5" role="tab">Tab label</button>
      </li>
      <li>
        <button class="rc-tab rc-btn" data-toggle="tab__panel-6" role="tab">Tab label</button>
      </li>
    </ul>
  </div>
  <div>
      <div id="tab__panel-1" class="rc-padding-y--md">
        <h3 class="rc-gamma">Title of tab 1</h3>
        <p>In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam.<br />
        Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper <a class="rc-styled-link" href="#/">parturient montes</a> erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.</p>
      </div>
      <div id="tab__panel-2" class="rc-padding-y--md">
        <h3 class="rc-gamma">Title of tab 2</h3>
        <p>In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper <a class="rc-styled-link" href="#/">parturient montes</a> erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.</p>
      </div>
      <div id="tab__panel-3" class="rc-padding-y--md">
        <h3 class="rc-gamma">Title of tab 3</h3>
        <p>In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam.<br />
        Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, erat velit sit amet neque. augue lorem sodales mi, ut ullamcorper <a class="rc-styled-link" href="#/">erat velit </a> sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.</p>
      </div>
      <div id="tab__panel-4" class="rc-padding-y--md">
        <h3 class="rc-gamma">Title of tab 4</h3>
        <p>In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam.<br />
        Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, lorem sodales mi, ut ullamcorper <a class="rc-styled-link" href="#/">parturient montes</a> erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.</p>
      </div>
      <div id="tab__panel-5" class="rc-padding-y--md">
        <h3 class="rc-gamma">Title of tab 5</h3>
        <p> Nullam sed fermentum tortor, eget fermentum diam. In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper <a class="rc-styled-link" href="#/">parturient montes</a> erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.</p>
      </div>
      <div id="tab__panel-6" class="rc-padding-y--md">
        <h3 class="rc-gamma">Title of tab 6</h3>
        <p>In vitae mi vitae elit. Nullam sed fermentum tortor, eget fermentum diam.<br />
        Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, erat velit sit amet neque. augue lorem sodales mi, ut ullamcorper <a class="rc-styled-link" href="#/">erat velit </a> sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.</p>
      </div>

  </div>
</div>
        

View control

Alternative version of tabs. Only regular size available.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam. Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius..
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed fermentum tortor, eget fermentum diam. Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam. Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed fermentum tortor, eget fermentum diam. Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed fermentum tortor, eget fermentum diam. Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam. Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. .
html
            <div>
  <div class="rc-fade--x" data-toggle-group>
    <ul class="rc-scroll--x rc-list rc-list--inline rc-list--align rc-list--blank" role="tablist">
      <li>
        <button class="rc-tab--view-control rc-btn rc-btn--icon-tab   rc-icon rc-advice--xs rc-iconography--xs" data-toggle="tab__panel--view-control-1" role="tab">Tab label</button>
      </li>
      <li>
        <button class="rc-tab--view-control rc-btn rc-btn--icon-tab  rc-icon rc-health--xs rc-iconography--xs" data-toggle="tab__panel--view-control-2" role="tab">Tab label</button>
      </li>
      <li>
        <button class="rc-tab--view-control rc-btn rc-btn--icon-tab  rc-icon rc-vet--xs rc-iconography--xs" data-toggle="tab__panel--view-control-3" role="tab">Tab label</button>
      </li>
      <li>
        <button class="rc-tab--view-control rc-btn rc-btn--icon-tab  rc-icon rc-bag--xs rc-iconography--xs" data-toggle="tab__panel--view-control-4" role="tab">Tab label</button>
      </li>
      <li>
        <button class="rc-tab--view-control rc-btn rc-btn--icon-tab  rc-icon rc-mobile--xs rc-iconography--xs" data-toggle="tab__panel--view-control-5" role="tab">Tab label</button>
      </li>
      <li>
        <button class="rc-tab--view-control rc-btn rc-btn--icon-tab  rc-icon rc-quality--xs rc-iconography--xs" data-toggle="tab__panel--view-control-6" role="tab">Tab label</button>
      </li>
    </ul>
  </div>
  <div>
      <div id="tab__panel--view-control-1" class="rc-padding-y--md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam. Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius..</div>
      <div id="tab__panel--view-control-2" class="rc-padding-y--md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nullam sed fermentum tortor, eget fermentum diam. Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.</div>
      <div id="tab__panel--view-control-3" class="rc-padding-y--md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam. Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh.</div>
      <div id="tab__panel--view-control-4" class="rc-padding-y--md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nullam sed fermentum tortor, eget fermentum diam. Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.</div>
      <div id="tab__panel--view-control-5" class="rc-padding-y--md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nullam sed fermentum tortor, eget fermentum diam. Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.</div>
      <div id="tab__panel--view-control-6" class="rc-padding-y--md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi vitae elit suscipit faucibus non quis enim. Nullam sed fermentum tortor, eget fermentum diam. Aenean tincidunt enim ante, vitae porttitor nulla tincidunt sed. Sed fringilla, nulla et euismod eleifend, augue lorem sodales mi, ut ullamcorper erat velit sit amet neque. Duis nec convallis tellus, eget feugiat purus. .</div>
  </div>
</div>
        

Tab sizes

Two sizes of tab are available; Default and Small. Default is used for larger devices and responsively reduces down the Small on smaller devices. Small can also be used on larger devices, when required, such as if space is at a premium with this staying the same size on smaller devices:

html
            <div class="rc-fade--x" data-toggle-group>
  <ul class="rc-scroll--x rc-list rc-list--inline rc-list--align rc-list--blank" role="tablist">
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-1" role="tab">Tab label</button>
    </li>
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-2" role="tab">Tab label</button>
    </li>
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-3" role="tab">Tab label</button>
    </li>
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-4" role="tab">Tab label</button>
    </li>
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-5" role="tab">Tab label</button>
    </li>
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-6" role="tab">Tab label</button>
    </li>
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-7" role="tab">Tab label</button>
    </li>
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-8" role="tab">Tab label</button>
    </li>
  </ul>
</div>
        

Centered Tabs

Tabs can be centered using rc-tab--centered applied on the list element:

html
            <div class="rc-fade--x" data-toggle-group>
  <ul class="rc-tab--centered rc-scroll--x rc-list rc-list--inline rc-list--align rc-list--blank" role="tablist">
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-1" role="tab">Tab label</button>
    </li>
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-2" role="tab">Tab label</button>
    </li>
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-3" role="tab">Tab label</button>
    </li>
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-4" role="tab">Tab label</button>
    </li>
    <li>
      <button class="rc-tab rc-btn rc-btn--sm" data-toggle="rc-tab__panel-5" role="tab">Tab label</button>
    </li>
  </ul>
</div>
        

Large image tabs

Used in the same way as regular Tabs but with the ability to use Round Images within the tabs and multiple lines of copy for the tab itself. These differences mean that the active underline is removed from regular tabs and is replaced with an active border on the image itself, which varies in width dependant on which Round Image is chosen. Only Large and Medium Round Image elements can be used for this type of Tab. When there are too many tabs to show on one screen (such as on a smaller device) the tabs become horizontally scrollable.

html
            <div class="rc-fade--x" data-toggle-group>
  <ul class="rc-scroll--x rc-list rc-list--inline rc-list--align rc-list--blank" role="tablist">
    <li>
      <button class="rc-tab rc-tab--img rc-btn" data-toggle="image__panel-1" role="tab">
        <figure class="rc-tab__img rc-img--round rc-img--round--lg" style="background-image: url('/assets/images/img-tabs-example.jpg')">
          <figcaption class="rc-screen-reader-text">Tab image</figcaption>
        </figure>
        <span class="rc-tab__label">Tab label 1</span>
        <span class="rc-tab__label">Secondary label 1</span>
      </button>
    </li>
    <li>
      <button class="rc-tab rc-tab--img rc-btn" data-toggle="image__panel-2" role="tab">
        <figure class="rc-tab__img rc-img--round rc-img--round--lg" style="background-image: url('/assets/images/img-tabs-example.jpg')">
          <figcaption class="rc-screen-reader-text">Tab image</figcaption>
        </figure>
        <span class="rc-tab__label">Tab label 2</span>
        <span class="rc-tab__label">Secondary label 2</span>
      </button>
    </li>
    <li>
      <button class="rc-tab rc-tab--img rc-btn" data-toggle="image__panel-3" role="tab">
        <figure class="rc-tab__img rc-img--round rc-img--round--lg" style="background-image: url('/assets/images/img-tabs-example.jpg')">
          <figcaption class="rc-screen-reader-text">Tab image</figcaption>
        </figure>
        <span class="rc-tab__label">Tab label 3</span>
        <span class="rc-tab__label">Secondary label 3</span>
      </button>
    </li>
    <li>
      <button class="rc-tab rc-tab--img rc-btn" data-toggle="image__panel-4" role="tab">
        <figure class="rc-tab__img rc-img--round rc-img--round--lg" style="background-image: url('/assets/images/img-tabs-example.jpg')">
          <figcaption class="rc-screen-reader-text">Tab image</figcaption>
        </figure>
        <span class="rc-tab__label">Tab label 4</span>
        <span class="rc-tab__label">Secondary label 4</span>
      </button>
    </li>
  </ul>
</div>
        

Small image tabs

html
            <div class="rc-fade--x" data-toggle-group>
  <ul class="rc-scroll--x rc-list rc-list--inline rc-list--align rc-list--blank" role="tablist">
    <li>
      <button class="rc-tab rc-tab--img rc-btn" data-toggle="image__panel-1" role="tab">
        <figure class="rc-tab__img rc-img--round rc-img--round--md" style="background-image: url('/assets/images/img-tabs-example.jpg')">
          <figcaption class="rc-screen-reader-text">Tab image</figcaption>
        </figure>
        <span class="rc-tab__label">Tab label 1</span>
        <span class="rc-tab__label">Secondary label 1</span>
      </button>
    </li>
    <li>
      <button class="rc-tab rc-tab--img rc-btn" data-toggle="image__panel-2" role="tab">
        <figure class="rc-tab__img rc-img--round rc-img--round--md" style="background-image: url('/assets/images/img-tabs-example.jpg')">
          <figcaption class="rc-screen-reader-text">Tab image</figcaption>
        </figure>
        <span class="rc-tab__label">Tab label 2</span>
        <span class="rc-tab__label">Secondary label 2</span>
      </button>
    </li>
    <li>
      <button class="rc-tab rc-tab--img rc-btn" data-toggle="image__panel-3" role="tab">
        <figure class="rc-tab__img rc-img--round rc-img--round--md" style="background-image: url('/assets/images/img-tabs-example.jpg')">
          <figcaption class="rc-screen-reader-text">Tab image</figcaption>
        </figure>
        <span class="rc-tab__label">Tab label 3</span>
        <span class="rc-tab__label">Secondary label 3</span>
      </button>
    </li>
    <li>
      <button class="rc-tab rc-tab--img rc-btn" data-toggle="image__panel-4" role="tab">
        <figure class="rc-tab__img rc-img--round rc-img--round--md" style="background-image: url('/assets/images/img-tabs-example.jpg')">
          <figcaption class="rc-screen-reader-text">Tab image</figcaption>
        </figure>
        <span class="rc-tab__label">Tab label 4</span>
        <span class="rc-tab__label">Secondary label 4</span>
      </button>
    </li>
  </ul>
</div>
        

Single item tab

html
            <div>
  <div class="rc-fade--x" data-toggle-group>
    <ul class="rc-scroll--x rc-list rc-list--inline rc-list--align rc-list--blank" role="tablist">
      <li>
        <button class="rc-tab rc-btn" data-toggle="tab__panel-1--single" role="tab">Tab label</button>
      </li>
    </ul>
  </div>
<div>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 17th October 2018 [ui_assets/components/tabs.yml]
    Add containers with content to tabs example.
  • 12th October 2018 [ui_assets/components/tabs.yml]
    Add new tab version to portal
  • 3rd October 2018 [ui_assets/components/tabs.yml]
    Added docs for centered tabs
  • 3rd October 2018 [ui_assets/components/tabs.yml]
    Add example with single item tab, add actual content to first example.
  • 17th September 2018 [ui_assets/components/tabs.yml]
    spelling and grammar updates
  • 31st July 2018 [ui_assets/components/tabs.yml]
    Add missing prefixes for tabs page.
  • 25th July 2018 [ui_assets/components/tabs.yml]
    prefix list--align
  • 25th July 2018 [ui_assets/components/tabs.yml]
    prefix list-line
  • 12th July 2018 [ui_assets/components/tabs.yml]
    Fix incorrect tab class.
  • 12th July 2018 [ui_assets/components/tabs.yml]
    Added missing prefix for tabs.
  • 12th July 2018 [ui_assets/components/tabs.yml]
    Prefixed classes throughout the portal with rc-.
  • 11th May 2018 [ui_assets/components/tabs.yml]
    change title of image tabs to large image tabs. Change country selector image tab to use medium image size rather than large
  • 10th April 2018 [ui_assets/components/tabs.yml]
    Updated changelog, tabs copy
  • 6th April 2018 [ui_assets/components/tabs.yml]
    Standardised small, medium, large to sm, md, lg for consistency
  • 28th March 2018 [ui_assets/components/tabs.yml]
    Updated tabs, lists and accordion documentation
  • 27th March 2018 [ui_assets/components/tabs.yml]
    Updated tabs and lang picker markup
  • 23rd March 2018 [ui_assets/components/tabs.yml]
    Update tab markup
  • 23rd March 2018 [ui_assets/components/tabs.yml]
    Updated tabs documentation
  • 23rd March 2018 [ui_assets/components/tabs.yml]
    Initial markup for lang selector & tabs
  • 21st March 2018 [ui_assets/components/tabs.yml]
    Added new tab markup with image tabs
  • 8th March 2018 [ui_assets/components/tabs.yml]
    Re-ordered nav items
  • 7th March 2018 [ui_assets/components/tabs.yml]
    Removed '--standard' from list, added min-height to homepage image
  • 7th March 2018 [ui_assets/components/tabs.yml]
    Corrected tabs markup and updated buttons classes.
  • 19th February 2018 [ui_assets/components/tabs.yml]
    Convert all multi line text to use
  • 1st December 2017 [ui_assets/components/tabs.yml]
    Reorganised elements navigation
  • 1st December 2017 [ui_assets/components/tabs.yml]
    Restructured folder order.
  • 13th November 2017 [ui_assets/components/tabs.yml]
    Added paragraph twig filter and removed p tags from YAML
  • 29th August 2017 [ui_assets/components/tabs.yml]
    Refactored naming convention used for levels of abstraction. https://trello.com/c/H5kTHTkZ/259-copy-change-update-naming-convention-on-sidebar
  • 19th July 2017 [ui_assets/components/tabs.yml]
    Added associated files to page config for use with git info collection.
  • 18th July 2017 [ui_assets/components/tabs.yml]
    Enabled options through data-attributes and reflected through markup in the examples.
  • 12th July 2017 [ui_assets/components/tabs.yml]
    Tabs markup improvements.
  • 11th July 2017 [ui_assets/components/tabs.yml]
    Added remaining content.