Each tab label describes its content and sets user expectations. Labels are concise and use one to two words maximum. Keep in mind that at mobile widths, the character length of a title will impact the experience. Icons are not permitted in tab labels.
A maximum of six tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.
Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.
Tab can be opened on page load by anchor value, see example.
<div class="ds-block">
<div class="ds-tabs">
<div class="ds-tabs-nav" role="tablist">
<button class="ds-tabs-nav__tab"
role="tab"
aria-selected="true"
aria-controls="tab1"
id="tab1trigger">Tab 1</button>
<button class="ds-tabs-nav__tab"
role="tab"
aria-selected="false"
aria-controls="tab2"
id="tab2trigger"
tabindex="-1">Tab 2</button>
<button class="ds-tabs-nav__tab"
role="tab"
aria-selected="false"
aria-controls="tab3"
id="tab3trigger"
tabindex="-1">Tab 3</button>
</div>
<div class="ds-tabs-content">
<div id="tab1" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab1trigger">
<h2>First</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate laboriosam libero quis maiores hic explicabo distinctio nesciunt alias! Distinctio ratione eligendi delectus natus accusamus iste laborum omnis qui eius quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate laboriosam libero quis maiores hic explicabo distinctio nesciunt alias! Distinctio ratione eligendi delectus natus accusamus iste laborum omnis qui eius quas.</p>
</div>
<div id="tab2" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab2trigger" hidden>
<h2>Second</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate laboriosam libero quis maiores hic explicabo distinctio nesciunt alias! Distinctio ratione eligendi delectus natus accusamus iste laborum omnis qui eius quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate laboriosam libero quis maiores hic explicabo distinctio nesciunt alias! Distinctio ratione eligendi delectus natus accusamus iste laborum omnis qui eius quas.</p>
</div>
<div id="tab3" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab3trigger" hidden>
<h2>Third</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate laboriosam libero quis maiores hic explicabo distinctio nesciunt alias! Distinctio ratione eligendi delectus natus accusamus iste laborum omnis qui eius quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate laboriosam libero quis maiores hic explicabo distinctio nesciunt alias! Distinctio ratione eligendi delectus natus accusamus iste laborum omnis qui eius quas.</p>
</div>
</div>
</div>
</div>