UTS Style Guide

6.27 Tab list View in a new window

Minimal, list of tabs that wrap on mobile.

Twig: components/tab-list/tab-list.twig

Example

First tab content

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.

Second tab content

Third tab content

Markup

<div class="tab-list js-tab-list">
  <div class="tab-list__tab-wrapper">
    <ul class="tab-list__list">
      <li>
        <a href="#tabList1" class="tab-list__tab">First tab</a>
      </li>
      <li>
        <a href="#tabList2" class="tab-list__tab">Second tab</a>
      </li>
      <li>
        <a href="#tabList3" class="tab-list__tab">Third tab</a>
      </li>
    </ul>
  </div>

  <section class="tab-list__panel" id="tabList1">
    <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-list__panel" id="tabList2">
    <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-list__panel" id="tabList3">
    <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>