6.19 Tab bar View in a new window
Large, row aligned tabs that become column on mobile.
Twig: components/tab-bar/tab-bar.twig
Example
Markup
<div class="tab-bar js-tab-bar">
<div class="tab-bar__tab-wrapper">
<ul class="tab-bar__list">
<li>
<a href="#tab1" class="tab-bar__tab">
<div class="tab-bar__tab-title"><span>First tab</span></div>
<div class="tab-bar__tab-description">A tab description</div>
</a>
</li>
<li>
<a href="#tab2" class="tab-bar__tab">
<div class="tab-bar__tab-title"><span>Second tab</span></div>
<div class="tab-bar__tab-description">A tab description</div>
</a>
</li>
<li>
<a href="#tab3" class="tab-bar__tab">
<div class="tab-bar__tab-title"><span>Third tab</span></div>
<div class="tab-bar__tab-description">A tab description</div>
</a>
</li>
</ul>
</div>
<section class="tab-bar__panel" id="tab1">
<h3>First tab content</h3>
<p>Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section class="tab-bar__panel" id="tab2">
<h3>Second tab content</h3>
<p>Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section class="tab-bar__panel" id="tab3">
<h3>Third tab content</h3>
<p>Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</div>