Origami Frontend Components & Services

Demos: o-tabs

Buttontabs

<ul
  data-o-component="o-tabs"
  class="o-tabs o-tabs--buttontabs o-tabs--secondary"
  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>

Button Tabs Secondary Inverse

<div class="container-inverse">
  <ul
    data-o-component="o-tabs"
    class="o-tabs o-tabs--buttontabs o-tabs--secondary o-tabs--inverse"
    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>
</div>

Button Tabs Big

Add the big modifier to any theme for larger tabs.

<ul
  data-o-component="o-tabs"
  class="o-tabs o-tabs--buttontabs o-tabs--secondary o-tabs--big"
  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>
Status
active Origami v1 (Bower)
Switch component view

GitHub Repository

Install o-tabs

If using the Build Service, add o-tabs@^5.0.6 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-tabs@^5.0.6".

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: #origami-support
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: #origami-support
Email: origami.support@ft.com