Tabs
The tabs component is used to show a variety of related information on a single page, whilst keeping the page volume small.
Usage
Place the tabs on a page, add the JavaScript support class slb-show, to have a user start on a tab item.
Alternatively the tab item and panel can be left without one to not direct users down a certain tab.
Each click-able tab should be set to slb-show with its relevant panel, by default the tab panels are not visible until the JavaScript support class of slb-show is added.
Use with the slb-fade transition class to get a fade effect on each clickable tab
Accessible attributes
| Accessible attribute | Description |
|---|---|
role="tablist" |
Indicates that the element serves as a container for a set of tabs. |
aria-label="DESCRIPTION" |
Provides a label on the same level as the role tablist, that describes the purpose of the set of tabs. |
role="tab" |
Indicates the element serves as a tab control on each clickable tab. |
aria-selected="true" |
Indicates the element serves as a tab control on each clickable tab is active when true, and inactive when false. |
aria-controls="IDREF" |
Refers to the tabpanel element associated with each clickable tab. |
role="tabpanel" |
Indicates the element serves as a container for tab panel content. |
aria-labelledby="IDREF" |
Refers to the tab element that controls each panel. |
aria-hidden="true" |
Indicates whether the panel is visible, set to true for the active panel and false for inactive panels. |
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-tabs__panel--border |
Adding to each tab panel to give a border around the panel content. |
JavaScript Support
| JavaScript Support class name | Description |
|---|---|
slb-show |
Place on the clickable tab to show in an active state and place on the relevant tab panel to display the panel content. |
Tab One
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.
Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
Tab One
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.
Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
tabs\tabs.hbs
<div class="slb-tabs">
<ul class="slb-tabs__tab" role="tablist" aria-label="Example tabs">
<li class="slb-tabs__tab-item">
<a class="slb-tabs__tab-link slb-show" id="[modifier class]-one-tab" href="#[modifier class]-one" role="tab" aria-controls="[modifier class]-one" aria-selected="true">Tab One</a>
</li>
<li class="slb-tabs__tab-item">
<a class="slb-tabs__tab-link" id="[modifier class]-two-tab" href="#[modifier class]-two" role="tab" aria-controls="[modifier class]-two" aria-selected="false">Tab Two</a>
</li>
<li class="slb-tabs__tab-item">
<a class="slb-tabs__tab-link" id="[modifier class]-three-tab" href="#[modifier class]-three" role="tab" aria-controls="[modifier class]-three" aria-selected="false">Tab Three</a>
</li>
</ul>
<div class="slb-tabs__content">
<div id="[modifier class]-one" class="slb-tabs__panel [modifier class] slb-fade slb-show" role="tabpanel" aria-labelledby="[modifier class]-one-tab" aria-hidden="false">
<h2>
Tab One
</h2>
<p>
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.
</p>
<p>
Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
</p>
</div>
<div id="[modifier class]-two" class="slb-tabs__panel [modifier class] slb-fade" role="tabpanel" aria-labelledby="[modifier class]-two-tab" aria-hidden="true">
<h2>
Tab Two
</h2>
<p>
Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
</p>
<p>
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.
</p>
</div>
<div id="[modifier class]-three" class="slb-tabs__panel [modifier class] slb-fade" role="tabpanel" aria-labelledby="[modifier class]-three-tab" aria-hidden="true">
<h2>
Tab Three
</h2>
<p>
Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
</p>
<p>
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.
</p>
</div>
</div>
</div>
components/_tabs.scss