Origami Frontend Components & Services

Demos: o-tabs

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>
Switch component view

GitHub Repository

Install o-tabs

If using the Build Service, add o-tabs@^4.3.2 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=whitelabel.

If running a Manual Build, run bower install --save "o-tabs@^4.3.2".

Help & Support

o-tabs is maintained directly by the Origami team. If you have any questions about o-tabs or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com