Tabs

  • Tab 1 content
<div class="tabs">
	<ul class="tabs__nav" role="tablist">
		<li id="tab-1" class="tabs__tab tabs__tab--active" role="tab" aria-selected="true">
            <a class="tabs__tab-link link--no-underline" href="#panel-1" aria-controls="panel-1" tabindex="0">Tab 1</a>
       </li>
		<li id="tab-2" class="tabs__tab" role="tab" aria-selected="false">
            <a class="tabs__tab-link link--no-underline" href="#panel-2" aria-controls="panel-2" tabindex="-1">Tab 2</a>
        </li>
		<li id="tab-3" class="tabs__tab" role="tab" aria-selected="false">
            <a class="tabs__tab-link link--no-underline" href="#panel-3" aria-controls="panel-3" tabindex="-1">Tab 3</a>
        </li>
	</ul>
	<ul class="tabs__content">
		<li id="panel-1" class="tabs__panel" role="tabpanel" aria-labelledby="tab-1" aria-hidden="false">
			Tab 1 content
		</li>
		<li id="panel-2" class="tabs__panel" role="tabpanel" aria-labelledby="tab-2" aria-hidden="true">
			Tab 2 content
		</li>
		<li id="panel-3" class="tabs__panel" role="tabpanel" aria-labelledby="tab-3" aria-hidden="true">
			Tab 3 content
		</li>
	</ul>
</div>