Tabs - Astridd

Overview

The tabs component is a handy way of breaking content up into sections, making it easier for a user to understand. This is a clever way of having a large amount of content on your page, without making it overly long.

Examples

Horizontal variation

one

Check me out! I'm a super cool Tab panel with text content!

<!-- Tabs navigation -->
<div class="tabs" data-myob-tabs id="example-tabs" role="tablist">
<div class="tabs__menu">
<ul class="tabs__list">
<li class="tabs__title is-active" role="presentation">
<a href="#panel1" aria-selected="true" role="tab" aria-controls="panel1" id="panel1-label">Lorem ipsum</a>
</li>
<li class="tabs__title" role="presentation">
<a href="#panel2" role="tab" aria-controls="panel2" aria-selected="false" id="panel2-label">Dolor sit amet</a>
</li>
<li class="tabs__title" role="presentation">
<a href="#panel3" role="tab" aria-controls="panel3" aria-selected="false" id="panel3-label">Consectetur adipiscing elit</a>
</li>
<li class="tabs__title" role="presentation">
<a href="#panel4" role="tab" aria-controls="panel4" aria-selected="false" id="panel4-label">Integer non enim</a>
</li>
<li class="tabs__title" role="presentation">
<a href="#panel5" role="tab" aria-controls="panel5" aria-selected="false" id="panel5-label">Eu ligula ultricies suscipit</a>
</li>
</ul>
</div>
<!-- Tabs content -->
<div class="tabs__content" data-tabs-content="example-tabs">
<div class="tabs__panel is-active" id="panel1" role="tabpanel" aria-hidden="false" aria-labelledby="panel1-label">
<p>one</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs__panel" id="panel2" role="tabpanel" aria-hidden="true" aria-labelledby="panel2-label">
<p>two</p>
<img class="thumbnail" src="http://placehold.it/200x200">
</div>
<div class="tabs__panel" id="panel3" role="tabpanel" aria-hidden="true" aria-labelledby="panel3-label">
<p>three</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs__panel" id="panel4" role="tabpanel" aria-hidden="true" aria-labelledby="panel4-label">
<p>four</p>
<img class="thumbnail" src="http://placehold.it/150x300">
</div>
<div class="tabs__panel" id="panel5" role="tabpanel" aria-hidden="true" aria-labelledby="panel5-label">
<p>five</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
</div>
</div>

Usage guidelines

Dos	Don'ts
Do use clear labels that explain the content contained within.	Don't place large amounts of content inside the Tabs area. Consider splitting out into a seperate page.
Do set a default Tab that presents the most important information first.	Don't exceed a maximum of 6 links. Plan your page structure carefully when using it.
	Don't nest Tabs inside another Tabs.
	Don't place within a container smaller than the full page width.
	Avoid placing media such as a video or large components inside the Tab content area.

Implementation guidelines

Name	Class	Description
Active state	`.is-active`	Set active state of a single Tab. Apply to both `.tabs__title` and corresponding `.tabs__panel` elements to correctly set.