Tabbed Content

The Tabbed Content component is an accessible tabs solution.

Minority Tab Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper.

Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Lorem ipsum dolor sit amet

Vestibulum maximus metus velit, vel laoreet felis auctor a. Aliquam consequat varius sapien non tempor. Nunc diam lorem, feugiat quis mauris nec, ullamcorper imperdiet tellus. Etiam eu magna posuere, laoreet nibh in, convallis massa. Praesent ut nulla vel augue ultricies molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas mollis, felis non venenatis molestie, risus lectus condimentum arcu, gravida dignissim lacus nulla ut lectus. Cras eu justo non urna malesuada malesuada. Duis ante elit, consectetur eget risus quis, aliquet lobortis felis. Maecenas ac dui vel neque mattis egestas ut in arcu. Vivamus sed aliquet arcu.

Read more about content

Markup Details
                            {{ attach_library('goizueta_theme/tabbed-content') }}

{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('tabbed-content accessible-tabs') : ' class="tabbed-content accessible-tabs"'
%}
<section {{ attributes|raw }} aria-multiselectable="false">
  {% if tabbed_content.callout %}
    {% include '@components/text-breaker/text-breaker.twig' with tabbed_content.callout only %}
  {% endif %}
  {% if tabbed_content.tabs %}
    <nav class="tabbed-content__tabs accessible-tabs__navigation">
      <ul class="tabbed-content__tab-list" role="tablist">
        {% for tab in tabbed_content.tabs %}
          <li class="tabbed-content__tab-item{{ loop.index == 1 ? ' active' : '' }}" role="presentation" {{tab.attributes}} >
            <button
              class="tabbed-content__tab-label accessible-tabs__label"
              id="tab-label--{{ tabbed_content.instance }}--{{ loop.index }}"
              aria-controls="tab-panel--{{ tabbed_content.instance }}--{{ loop.index }}"
              aria-posinset="{{ loop.index }}"
              aria-setsize="{{ loop.length }}"
              aria-selected="{{ loop.index == 1 ? 'true' : 'false' }}"
              role="tab"
              tabindex="0"
            >
              {{ tab.tab_label }}
            </button>
          </li>
        {% endfor %}
      </ul>
    </nav>

    <div class="tabbed-content__panels">
      {% for content in tabbed_content.tabs %}
        <div
          class="tabbed-content__panel accessible-tabs__panel"
          id="tab-panel--{{ tabbed_content.instance }}--{{ loop.index }}"
          aria-hidden="{{ loop.index == 1 ? 'false' : 'true' }}"
          aria-labelledby="tab-label--{{ tabbed_content.instance }}--{{ loop.index }}"
          data-title="{{ content.tab_label }}"
          role="tabpanel"
          tabindex="-1"
        >
          <div class="tabbed-content__panel-container accessible-tabs__panel-container">
            {{ content.tab_panel }}
          </div>
        </div>
      {% endfor %}
    </div>
  {% endif %}
</section>