Tabs

Tabs

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

<div class="tab" data-tab="fdd62d02-bca1-4ba2-9536-5ef9ec54853a">
    <div class="tab__navigation button-group">
        <button class="button button--small button--green button--green--outline" data-tab-for=93f5bf58-58cc-469b-aad8-00e7bac8335d>
            <span>quos sed vel</span>
        </button>
        <button class="button button--small button--green button--green--outline" data-tab-for=54d23e6b-fdd4-4279-b872-8e1afc34b753>
            <span>est provident voluptatem</span>
        </button>
        <button class="button button--small button--green button--green--outline" data-tab-for=81a3846f-c6ac-4311-8415-62e13d92d3a3>
            <span>illum placeat architecto</span>
        </button>
        <button class="button button--small button--green button--green--outline" data-tab-for=123d612a-1870-4d64-a23c-37603ab07516>
            <span>et qui deserunt</span>
        </button>
    </div>

    <div class="tab__items">
        <div class="tab__item tab__item--93f5bf58-58cc-469b-aad8-00e7bac8335d" data-tab-item="93f5bf58-58cc-469b-aad8-00e7bac8335d">
            <h3 class="tab__item__title">quos sed vel</h3>
            Nihil doloremque consequuntur dolor repellendus illo odit. Quibusdam facilis qui. Nobis doloribus similique provident. Dolor illum odio. Ut ad et sit.
        </div>
        <div class="tab__item tab__item--54d23e6b-fdd4-4279-b872-8e1afc34b753" data-tab-item="54d23e6b-fdd4-4279-b872-8e1afc34b753">
            <h3 class="tab__item__title">est provident voluptatem</h3>
            Voluptates consequatur excepturi nam culpa et. Consequuntur necessitatibus fugit ea. Ut ea et in aut nesciunt enim molestiae. Iure laboriosam consequatur quidem. Accusantium ut quis tempore repellendus quae fuga.
        </div>
        <div class="tab__item tab__item--81a3846f-c6ac-4311-8415-62e13d92d3a3" data-tab-item="81a3846f-c6ac-4311-8415-62e13d92d3a3">
            <h3 class="tab__item__title">illum placeat architecto</h3>
            Consequatur repellat magnam quidem. Animi aliquid minima aut voluptas debitis accusamus. Eos rem voluptatem. Et eius quis eos quos voluptas iste eaque libero non. Dolores quia eum sint itaque omnis et mollitia nam.
        </div>
        <div class="tab__item tab__item--123d612a-1870-4d64-a23c-37603ab07516" data-tab-item="123d612a-1870-4d64-a23c-37603ab07516">
            <h3 class="tab__item__title">et qui deserunt</h3>
            Labore libero eius velit est et ut ut. Perferendis accusamus est consequatur blanditiis recusandae nam. Omnis eos eius in assumenda mollitia. Ut eum rerum id ad saepe iusto inventore quo ex. Qui fugiat reiciendis ullam est nihil tenetur dicta.
        </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>