Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language.
See more details regarding this Migration
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.
Default tabs
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Title of tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Title of tab 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
<div>
<nav class="rc-tabs__controller 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-b65980c1-e059-472b-a343-a8405673ca9e" role="tab">Tab 1</button>
</li>
<li>
<button class="rc-tab rc-btn" data-toggle="tab__panel-2--single-b65980c1-e059-472b-a343-a8405673ca9e" role="tab">Tab 2</button>
</li>
<li>
<button class="rc-tab rc-btn" data-toggle="tab__panel-3--single-b65980c1-e059-472b-a343-a8405673ca9e" role="tab">Tab 3</button>
</li>
</ul>
</nav>
<div>
<div id="tab__panel-1--single-b65980c1-e059-472b-a343-a8405673ca9e" class="rc-padding-y--md">
<h3 class="rc-gamma">Title of tab 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
<div id="tab__panel-2--single-b65980c1-e059-472b-a343-a8405673ca9e" class="rc-padding-y--md">
<h3 class="rc-gamma">Title of tab 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
<div id="tab__panel-3--single-b65980c1-e059-472b-a343-a8405673ca9e" class="rc-padding-y--md">
<h3 class="rc-gamma">Title of tab 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
</div>
</div>Copied!
Tabs with border
Title of tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Title of tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Title of tab 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
<div>
<nav class="rc-tabs__controller rc-tabs__controller--border 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-5157642a-817a-4780-9e95-c939e908fc7d" role="tab">Tab 1</button>
</li>
<li>
<button class="rc-tab rc-btn" data-toggle="tab__panel-2--single-5157642a-817a-4780-9e95-c939e908fc7d" role="tab">Tab 2</button>
</li>
<li>
<button class="rc-tab rc-btn" data-toggle="tab__panel-3--single-5157642a-817a-4780-9e95-c939e908fc7d" role="tab">Tab 3</button>
</li>
</ul>
</nav>
<div>
<div id="tab__panel-1--single-5157642a-817a-4780-9e95-c939e908fc7d" class="rc-padding-y--md">
<h3 class="rc-gamma">Title of tab 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
<div id="tab__panel-2--single-5157642a-817a-4780-9e95-c939e908fc7d" class="rc-padding-y--md">
<h3 class="rc-gamma">Title of tab 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
<div id="tab__panel-3--single-5157642a-817a-4780-9e95-c939e908fc7d" class="rc-padding-y--md">
<h3 class="rc-gamma">Title of tab 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
</div>
</div>Copied!
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.
<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-btn rc-tab--view-control rc-btn rc-btn--icon-tab rc-icon rc-advice--xs rc-iconography--xs" role="tab" data-toggle="tab__panel--view-control-1">Tab label</button>
</li>
<li>
<button class="rc-btn rc-tab--view-control rc-btn rc-btn--icon-tab rc-icon rc-health--xs rc-iconography--xs" role="tab" data-toggle="tab__panel--view-control-2">Tab label</button>
</li>
<li>
<button class="rc-btn rc-tab--view-control rc-btn rc-btn--icon-tab rc-icon rc-vet--xs rc-iconography--xs" role="tab" data-toggle="tab__panel--view-control-3">Tab label</button>
</li>
<li>
<button class="rc-btn rc-tab--view-control rc-btn rc-btn--icon-tab rc-icon rc-bag--xs rc-iconography--xs" role="tab" data-toggle="tab__panel--view-control-4">Tab label</button>
</li>
<li>
<button class="rc-btn rc-tab--view-control rc-btn rc-btn--icon-tab rc-icon rc-mobile--xs rc-iconography--xs" role="tab" data-toggle="tab__panel--view-control-5">Tab label</button>
</li>
<li>
<button class="rc-btn rc-tab--view-control rc-btn rc-btn--icon-tab rc-icon rc-quality--xs rc-iconography--xs" role="tab" data-toggle="tab__panel--view-control-6">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>Copied!
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:
Title of tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Title of tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Title of tab 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
<div>
<nav class="rc-tabs__controller 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="tab__panel-1--single-23888cc4-4b08-495b-a04d-17c2e99e2be9" role="tab">Small tab 1</button>
</li>
<li>
<button class="rc-tab rc-btn rc-btn--sm" data-toggle="tab__panel-2--single-23888cc4-4b08-495b-a04d-17c2e99e2be9" role="tab">Small tab 2</button>
</li>
<li>
<button class="rc-tab rc-btn rc-btn--sm" data-toggle="tab__panel-3--single-23888cc4-4b08-495b-a04d-17c2e99e2be9" role="tab">Small tab 3</button>
</li>
</ul>
</nav>
<div>
<div id="tab__panel-1--single-23888cc4-4b08-495b-a04d-17c2e99e2be9" class="rc-padding-y--md">
<h3 class="rc-gamma">Title of tab 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
<div id="tab__panel-2--single-23888cc4-4b08-495b-a04d-17c2e99e2be9" class="rc-padding-y--md">
<h3 class="rc-gamma">Title of tab 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
<div id="tab__panel-3--single-23888cc4-4b08-495b-a04d-17c2e99e2be9" class="rc-padding-y--md">
<h3 class="rc-gamma">Title of tab 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
</div>
</div>Copied!
Centered Tabs
Tabs can be centered using rc-tab--centered applied on the list element:
Title of tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Title of tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Title of tab 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
<div>
<nav class="rc-tabs__controller rc-fade--x" data-toggle-group="">
<ul class="rc-scroll--x rc-list rc-list--inline rc-list--align rc-list--blank rc-tab--centered" role="tablist">
<li>
<button class="rc-tab rc-btn rc-btn--sm" data-toggle="tab__panel-1--single-88a60da9-2dfe-4534-9574-b31bf1c0ca5e" role="tab">Centered tab 1</button>
</li>
<li>
<button class="rc-tab rc-btn rc-btn--sm" data-toggle="tab__panel-2--single-88a60da9-2dfe-4534-9574-b31bf1c0ca5e" role="tab">Centered tab 2</button>
</li>
<li>
<button class="rc-tab rc-btn rc-btn--sm" data-toggle="tab__panel-3--single-88a60da9-2dfe-4534-9574-b31bf1c0ca5e" role="tab">Centered tab 3</button>
</li>
</ul>
</nav>
<div>
<div id="tab__panel-1--single-88a60da9-2dfe-4534-9574-b31bf1c0ca5e" class="rc-padding-y--md">
<h3 class="rc-gamma">Title of tab 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
<div id="tab__panel-2--single-88a60da9-2dfe-4534-9574-b31bf1c0ca5e" class="rc-padding-y--md">
<h3 class="rc-gamma">Title of tab 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
<div id="tab__panel-3--single-88a60da9-2dfe-4534-9574-b31bf1c0ca5e" class="rc-padding-y--md">
<h3 class="rc-gamma">Title of tab 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
</div>
</div>Copied!
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.
<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--913a1c88-e994-4d90-a710-1aba7f9dc1d1" 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--913a1c88-e994-4d90-a710-1aba7f9dc1d1" 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--913a1c88-e994-4d90-a710-1aba7f9dc1d1" 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--913a1c88-e994-4d90-a710-1aba7f9dc1d1" 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>Copied!
Small image tabs
<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--1a307227-aaf4-4f73-b6a2-63fad6f4be17" 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--1a307227-aaf4-4f73-b6a2-63fad6f4be17" 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--1a307227-aaf4-4f73-b6a2-63fad6f4be17" 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--1a307227-aaf4-4f73-b6a2-63fad6f4be17" 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>Copied!
Single item tab
<div>
<nav class="rc-tabs__controller rc-fade--x" data-toggle-group="">
<ul class="rc-scroll--x rc-list rc-list--inline rc-list--align rc-list--blank rc-tab--centered" role="tablist">
<li>
<button class="rc-tab rc-btn rc-btn--sm" data-toggle="tab__panel-1--single-48bad749-f416-46f8-b2e7-3170ac11b496" role="tab">Single tab</button>
</li>
</ul>
</nav>
<div> </div>
</div>Copied!