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.11.8 |
| o-dom | ^2.0.3 |
| o-brand | >=2.2.0 <4 |
GitHub Repository
Quickstart
Build Service
Add the following to your
<script> and <link> tags.
o-tabs@^4.1.2
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.2"
For more information see the Origami build process.