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.

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. 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. 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. 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. 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. 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. 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">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. Phasellus eget odio a nisl tempor rhoncus.</div>
      <div id="tab__panel-2" 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. Phasellus eget odio a nisl tempor rhoncus.</div>
      <div id="tab__panel-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. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.</div>
      <div id="tab__panel-4" 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. Phasellus eget odio a nisl tempor rhoncus.</div>
      <div id="tab__panel-5" 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. Phasellus eget odio a nisl tempor rhoncus.</div>
      <div id="tab__panel-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. Ut id laoreet nibh. Phasellus tincidunt porttitor varius. Phasellus eget odio a nisl tempor rhoncus.</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

  • 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.