o-tabs

Tabs component for dividing content into meaningful sections.

active

Buttontabs

<ul data-o-component="o-tabs" class="o-tabs o-tabs--buttontabs" role="tablist">
	<li role="tab"><a href="#tabContent1">Tab 1</a></li>
	<li role="tab"><a href="#tabContent2">Tab 2</a></li>
	<li role="tab" aria-selected="true"><a href="#tabContent3">Tab 3</a></li>
</ul>
<div id="tabContent1" class="o-tabs__tabpanel">
	<h3>Tab content 1</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ipsum.</p>
</div>
<div id="tabContent2" class="o-tabs__tabpanel">
	<h3>Tab content 2</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ipsum.</p>
</div>
<div id="tabContent3" class="o-tabs__tabpanel">
	<h3>Tab content 3</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ipsum.</p>
</div>

Buttontabs Big

<ul data-o-component="o-tabs" class="o-tabs o-tabs--big o-tabs--buttontabs" role="tablist">
	<li role="tab"><a href="#tabContent1">Tab 1</a></li>
	<li role="tab"><a href="#tabContent2">Tab 2</a></li>
	<li role="tab" aria-selected="true"><a href="#tabContent3">Tab 3</a></li>
</ul>
<div id="tabContent1" class="o-tabs__tabpanel">
	<h3>Tab content 1</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ipsum.</p>
</div>
<div id="tabContent2" class="o-tabs__tabpanel">
	<h3>Tab content 2</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ipsum.</p>
</div>
<div id="tabContent3" class="o-tabs__tabpanel">
	<h3>Tab content 3</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ipsum.</p>
</div>
Bower Dependencies
o-colors ^4.0.2
o-buttons ^5.10.1
o-dom ^2.0.3
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-tabs@^4.1.0

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-tabs"@"^4.1.0"

For more information see the Origami build process.