Interactions
Tabs
Elements
The component is composed of multiple elements:
tabsthe wrappertabs__controlsthe wrapper of the controls elementstabs__itema single trigger element
tabs__contentthe wrapper of the tabs contents- `tabs__panel a single content element
<div class="tabs">
<div class="tabs__controls" role="tablist">
<button role="tab" aria-controls="tab_1" class="tabs__item">Tab 1</button>
<button role="tab" aria-controls="tab_2" class="tabs__item">Tab 2</button>
</div>
<div class="tabs__content">
<div class="tabs__panel" id="tab_1" role="tabpanel">Content 1</div>
<div class="tabs__panel" id="tab_2" role="tabpanel">Content 2</div>
</div>
</div>Content 1
Content 2
Properties
Add classes to the wrapper class to change the style of the component.
Direction
Changes the direction of the tabs (padding around elements).
class="tabs"
Default
Content 1
Content 2
class="tabs tabs--portrait"
Content 1
Content 2
Dense
Remove the background color.
class="tabs tabs--dense"
Content 1
Content 2
Default
Add a class to a tab__item element to change the default opened tab.
class="tabs__item tabs--default"
Content 1
Content 2