Tabs

Tabs

Each tab set should have a unique data-tab attribute value.

<div class="tab" data-tab="4dc6fabf-8cd0-4e20-a80e-01b7f027f319">
    <div class="tab__navigation button-group">
        <button class="button button--small button--green button--green--outline" data-tab-for=c090956c-f32b-48d4-92d1-91e15aff06ad>
            <span>in harum harum</span>
        </button>
        <button class="button button--small button--green button--green--outline" data-tab-for=629fdffd-de6c-4c23-bb2e-b800d0c96d50>
            <span>nihil dolor eligendi</span>
        </button>
        <button class="button button--small button--green button--green--outline" data-tab-for=b985da11-fc94-4278-a024-e12e9fea721b>
            <span>illum et et</span>
        </button>
        <button class="button button--small button--green button--green--outline" data-tab-for=b4a27e8f-89af-45e0-a490-174df3b25266>
            <span>aut ut ipsum</span>
        </button>
    </div>

    <div class="tab__items">
        <div class="tab__item tab__item--c090956c-f32b-48d4-92d1-91e15aff06ad" data-tab-item="c090956c-f32b-48d4-92d1-91e15aff06ad">
            <h3 class="tab__item__title">in harum harum</h3>
            Iusto ut debitis libero sit nihil quae ratione officiis. Vel eligendi odio dolor ratione id laboriosam. Numquam numquam tempora laboriosam possimus at est neque. Omnis minima consequuntur est error. Maiores saepe rerum asperiores quasi ipsam quis nesciunt enim nihil.
        </div>
        <div class="tab__item tab__item--629fdffd-de6c-4c23-bb2e-b800d0c96d50" data-tab-item="629fdffd-de6c-4c23-bb2e-b800d0c96d50">
            <h3 class="tab__item__title">nihil dolor eligendi</h3>
            Sint architecto magni in. Iste aliquam est quod. Amet velit praesentium est. Magnam eos nesciunt reprehenderit vitae vitae officiis. Officia distinctio voluptate iste aut possimus qui.
        </div>
        <div class="tab__item tab__item--b985da11-fc94-4278-a024-e12e9fea721b" data-tab-item="b985da11-fc94-4278-a024-e12e9fea721b">
            <h3 class="tab__item__title">illum et et</h3>
            Magni fugiat consequatur distinctio earum molestiae. Iusto vel earum sit molestiae iste laboriosam facilis. Molestias explicabo quaerat qui officia ut facere rem velit. Placeat ullam eaque velit consequuntur voluptatem. Non est totam voluptatem dolore odit.
        </div>
        <div class="tab__item tab__item--b4a27e8f-89af-45e0-a490-174df3b25266" data-tab-item="b4a27e8f-89af-45e0-a490-174df3b25266">
            <h3 class="tab__item__title">aut ut ipsum</h3>
            Dolorem consectetur culpa qui. Quidem minima praesentium deleniti est. Dolores eveniet et consequuntur placeat accusamus voluptatem temporibus. Dolore quas dolor dolor voluptatibus vel fugiat. Alias impedit ut.
        </div>
    </div>
</div>
<div class="{{modifier 'tab' modifiers}}" data-tab="{{ tab.uuid }}">
  <div class="tab__navigation button-group">
    {{#each tab.nav }}
        <button class="{{modifier 'button' modifiers}}" data-tab-for={{ uuid }}>
          <span>{{ text }}</span>
        </button>
    {{/each}}
  </div>

  <div class="tab__items">
    {{#each tab.tabs }}
        <div class="tab__item tab__item--{{ uuid }}" data-tab-item="{{ uuid }}">
            <h3 class="tab__item__title">{{ title }}</h3>
            {{ content }}
        </div>
    {{/each}}
  </div>
</div>