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

GitHub Repository

Install o-tabs

If using the Build Service, add o-tabs@^6.0.0 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@^6.0.0".

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