Axis

Tabbed panel light

Tab 1 Tab 2 Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores magni similique at dicta quo ipsam hic, molestias error quam dolorem odit doloribus sequi incidunt mollitia atque nobis tempora veritatis minus.


<div class="tab-list">
	<div class="tab-controls">
		<a href="tab1" class="tab-control active">Tab 1</a>
		<a href="tab2" class="tab-control">Tab 2</a>
		<a href="tab3" class="tab-control">Tab 3</a>
	</div>

	<div class="tab-panel active" id="tab1">
		<p>Tabbed panel content</p>
	</div>

	<div class="tab-panel" id="tab2">
		<p>Tabbed panel content</p>
	</div>

	<div class="tab-panel" id="tab3">
		<p>Tabbed panel content</p>
	</div>

	</div>
</div>

Tabbed panel dark

Tab 1 Tab 2 Tab 3


<div class="tab-list tab-list--dark">
	<div class="tab-controls">
		<a href="tab1" class="tab-control active">Tab 1</a>
		<a href="tab2" class="tab-control">Tab 2</a>
		<a href="tab3" class="tab-control">Tab 3</a>
	</div>

	<div class="tab-panel active" id="tab1">
		<p>Tabbed panel content</p>
	</div>

	<div class="tab-panel" id="tab2">
		<p>Tabbed panel content</p>
	</div>

	<div class="tab-panel" id="tab3">
		<p>Tabbed panel content</p>
	</div>

	</div>
</div>

← See all components