Switch to WilmingtonOverview
Tabs
Tabs allow the user to quickly navigate between 2 to 4 views on the same screen. Each tab contains separate information related to the same topic. Use this component only when the tab content is not readable when displayed all at once.
Tab label 1
Tab label 2
This is the content for Tab 1.
This is the content for Tab 2.
Tabs
The tab component consists of a container, a tab bar, text labels, and the tab content. In addition to the default state, the tab bar also has a hover state and a focus state. The selected and unselected states mark the active and inactive tabs, respectively.HTML
Vanilla JS
<div>
<div class="c-tabs">
<div class="c-tabs__tab c-tabs__tab--active">Tab Label 1</div>
<div class="c-tabs__tab">Tab Label 2</div>
</div>
<div class="c-tabs__content c-tabs__content--active l-padding-vertical--medium">
<p class="c-text-content">This is the content for Tab 1.</p>
</div>
<div class="c-tabs__content l-padding-vertical--medium">
<p class="c-text-content">This is the content for Tab 2.</p>
</div>
</div>Copy