Components
Tabs
Tabs organize content across different screens and views.
The order of the navigation buttons in the tabs container corresponds to the order of the elements with role="tabpanel".
Default
Content for Tab 1.
Content for Tab 2.
<article class="tabs">
<nav role="tablist">
<button role="tab" aria-selected="true">Tab 1</button>
<button role="tab" aria-selected="false">Tab 2</button>
</nav>
<div class="tabs-content">
<div role="tabpanel">
<p>Content for Tab 1.</p>
</div>
<div role="tabpanel" hidden>
<p>Content for Tab 2.</p>
</div>
</div>
</article>Smaller tabs buttons
Content for Tab 1.
Content for Tab 2.
<article class="tabs">
<nav role="tablist" class="size-small">
<button role="tab" aria-selected="true">Tab 1</button>
<button role="tab" aria-selected="false">Tab 2</button>
</nav>
<div class="tabs-content">
<div role="tabpanel">
<p>Content for Tab 1.</p>
</div>
<div role="tabpanel" hidden>
<p>Content for Tab 2.</p>
</div>
</div>
</article>Accent tabs buttons
Content for Tab 1.
Content for Tab 2.
<article class="tabs">
<nav role="tablist" class="style-accent">
<button role="tab" aria-selected="true">Tab 1</button>
<button role="tab" aria-selected="false">Tab 2</button>
</nav>
<div class="tabs-content">
<div role="tabpanel">
<p>Content for Tab 1.</p>
</div>
<div role="tabpanel" hidden>
<p>Content for Tab 2.</p>
</div>
</div>
</article>Tabs with buttons fit content size
Content for Tab 1.
Content for Tab 2.
Content for Tab 1.
Content for Tab 2.
<article class="tabs">
<nav role="tablist" class="fit-content">
<button role="tab" aria-selected="true">Tab 1</button>
<button role="tab" aria-selected="false">Tab 2</button>
</nav>
<div class="tabs-content">
<div role="tabpanel">
<p>Content for Tab 1.</p>
</div>
<div role="tabpanel" hidden>
<p>Content for Tab 2.</p>
</div>
</div>
</article>
<article class="tabs">
<nav role="tablist" class="fit-content style-accent">
<button role="tab" aria-selected="true">Tab 1</button>
<button role="tab" aria-selected="false">Tab 2</button>
</nav>
<div class="tabs-content">
<div role="tabpanel">
<p>Content for Tab 1.</p>
</div>
<div role="tabpanel" hidden>
<p>Content for Tab 2.</p>
</div>
</div>
</article>