Tabs - Column
HTML
<aside class="tabs tabs--col u-cf js-tabs">
<h2 class="h2">Tabbed Heading</h2>
<div class="tabs__nav">
<button class="tabs__nav-item js-tabs-nav-item" data-tab="1" tabindex="0">Tab 1 Short Title</button>
<button class="tabs__nav-item js-tabs-nav-item" data-tab="2" tabindex="0">Tab 2 Short Title</button>
<button class="tabs__nav-item js-tabs-nav-item" data-tab="3" tabindex="0">Tab 3 Short Title Is Longer</button>
<button class="tabs__nav-item js-tabs-nav-item" data-tab="4" tabindex="0">Tab 4 Short Title</button>
</div>
<div class="tabs__content">
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Heading Four Ut Enim</div>
<img src="/images/temp/accordion-1.jpg" class="tabs__image" alt="#">
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
<a href='#' class='btn btn__cta btn__cta--yellow'>Lorem Ipsum</a>
</div>
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Tab 2 Longer Title Goes Here</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
</div>
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Tab 3 Longer Title Goes Here</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
</div>
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Tab 4 Longer Title Goes Here</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</aside> <!-- .tabs -->Notes
Tabs
Templates this appears on:
Tabs - Row
HTML
<aside class="tabs tabs--row u-cf js-tabs">
<div class="tabs__nav">
<button class="tabs__nav-item js-tabs-nav-item" data-tab="1" tabindex="0">Tab 1 Row Short Title</button>
<button class="tabs__nav-item js-tabs-nav-item" data-tab="2" tabindex="0">Tab 2 Row Short Title</button>
<button class="tabs__nav-item js-tabs-nav-item" data-tab="3" tabindex="0">Tab 3 Row Short Title</button>
<button class="tabs__nav-item js-tabs-nav-item" data-tab="4" tabindex="0">Tab 4 Row Short Title</button>
</div>
<div class="tabs__content">
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Heading Four Ut Enim</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
</div>
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Tab 2 Longer Title Goes Here</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
</div>
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Tab 3 Longer Title Goes Here</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
</div>
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Tab 4 Longer Title Goes Here</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
</div>
</div>
</aside> <!-- .tabs -->Notes
Tabs
General Tabs - Vertical
HTML
<aside class="tabs tabs--col u-cf js-tabs">
<h2 class="h2">Tabbed Heading</h2>
<div class="tabs__nav">
<button class="tabs__nav-item js-tabs-nav-item" data-tab="1" tabindex="0">Tab 1 Short Title</button>
<button class="tabs__nav-item js-tabs-nav-item" data-tab="2" tabindex="0">Tab 2 Short Title</button>
<button class="tabs__nav-item js-tabs-nav-item" data-tab="3" tabindex="0">Tab 3 Short Title Is Longer</button>
<button class="tabs__nav-item js-tabs-nav-item" data-tab="4" tabindex="0">Tab 4 Short Title</button>
</div>
<div class="tabs__content">
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Heading Four Ut Enim</div>
<img src="/images/temp/accordion-1.jpg" class="tabs__image" alt="#">
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
<a href='#' class='btn btn__cta btn__cta--yellow'>Lorem Ipsum</a>
</div>
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Tab 2 Longer Title Goes Here</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
</div>
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Tab 3 Longer Title Goes Here</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
</div>
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Tab 4 Longer Title Goes Here</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</aside> <!-- .tabs -->Notes
Vertical tabs
Templates this appears on:
General Tabs - Horizontal
HTML
<aside class="tabs tabs--row u-cf js-tabs">
<div class="tabs__nav">
<button class="tabs__nav-item js-tabs-nav-item" data-tab="1" tabindex="0">Tab 1 Row Short Title</button>
<button class="tabs__nav-item js-tabs-nav-item" data-tab="2" tabindex="0">Tab 2 Row Short Title</button>
<button class="tabs__nav-item js-tabs-nav-item" data-tab="3" tabindex="0">Tab 3 Row Short Title</button>
<button class="tabs__nav-item js-tabs-nav-item" data-tab="4" tabindex="0">Tab 4 Row Short Title</button>
</div>
<div class="tabs__content">
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Heading Four Ut Enim</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
</div>
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Tab 2 Longer Title Goes Here</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
</div>
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Tab 3 Longer Title Goes Here</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
</div>
<div class="tabs__content-item js-tabs-content-item">
<div class="tabs__title">Tab 4 Longer Title Goes Here</div>
<div class="rtf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum tortor, consectetur at viverra vel, volutpat ac sapien. Nulla ac ante pretium, pharetra quam scelerisque, egestas justo. In id ante in risus suscipit congue sit amet.</p>
</div>
</div>
</div>
</aside> <!-- .tabs -->Notes
Horizontal tabs