<div class="fw-container">
<!-- Tabs -->
<section class="tabs" id="tabs-3" data-js-tabs='{"automatic":false}'>
<div class="tabs__header">
<h2 class="tabs__title" id="tabs-3__title">Tabs (Manual)</h2>
<div class="tabs__description">
<p>Arrow keys move focus between tabs but do not activate. Press Space or Enter to activate.</p>
</div>
</div>
<div class="tabs__list" role="tablist" data-js-tabs-list aria-labelledby="tabs-3__title">
<button class="button-bordered
" id="tabs-3__tab-1" role="tab" aria-controls="tabs-3__panel-1" data-js-tabs-tab="">
<span class="button-bordered__inner"> <span class="button-bordered__label">Lorem ipsum</span>
</span>
</button>
<button class="button-bordered
" id="tabs-3__tab-2" role="tab" aria-controls="tabs-3__panel-2" data-js-tabs-tab="" aria-selected="true">
<span class="button-bordered__inner"> <span class="button-bordered__label">Aenean massa</span>
</span>
</button>
<button class="button-bordered
" id="tabs-3__tab-3" role="tab" aria-controls="tabs-3__panel-3" data-js-tabs-tab="">
<span class="button-bordered__inner"> <span class="button-bordered__label">Vulputate Porta</span>
</span>
</button>
</div>
<div class="tabs__panels">
<div class="tabs__panel" id="tabs-3__panel-1" role="tabpanel" aria-labelledby="tabs-3__tab-1" data-js-tabs-panel>
<div class="tabs__panel-content">
<p>Panel 1 - Lorem <strong>ipsum dolor</strong> sit amet, consectetuer adipiscing elit. <a href="#">Aenean commodo</a> ligula eget dolor. Aenean massa. Cum <em>sociis natoque penatibus</em> et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
</div>
<div class="tabs__panel" id="tabs-3__panel-2" role="tabpanel" aria-labelledby="tabs-3__tab-2" data-js-tabs-panel>
<div class="tabs__panel-content">
<p>Panel 2 - Donec pede justo, <em>fringilla vel, aliquet</em> nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
<p>Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</div>
</div>
<div class="tabs__panel" id="tabs-3__panel-3" role="tabpanel" aria-labelledby="tabs-3__tab-3" data-js-tabs-panel>
<div class="tabs__panel-content">
<p>Panel 3 - Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
</div>
</div>
</div>
</section>
<!-- END: Tabs -->
</div>
{% set id = uniqid('tabs') %}
{% set has_group_title = group_title is not empty %}
{% set heading_level = heading_level ?? 2 %}
{% set base_tag = has_group_title ? 'section' : 'div' %}
{% set group_heading_tag = 'h' ~ (heading_level) %}
<div class="fw-container">
<!-- Tabs -->
<{{ base_tag }}
class="tabs"
id="{{ id }}"
data-js-tabs{% if settings is not empty %}='{{ settings|json_encode }}'{% endif %}
>
{% if has_group_title %}
<div class="tabs__header">
<{{ group_heading_tag }} class="tabs__title" id="{{ id ~ '__title' }}">
{{- group_title -}}
</{{ group_heading_tag }}>
{% if group_description %}
<div class="tabs__description">
<p>{{ group_description }}</p>
</div>
{% endif %}
</div>
{% endif %}
<div
class="tabs__list"
role="tablist"
data-js-tabs-list
{% if has_group_title %}aria-labelledby="{{ id ~ '__title' }}"{% endif %}
>
{% for item in items %}
{% set tab_attributes = {
'role': 'tab',
'aria-controls': id ~ '__panel-' ~ loop.index,
'data-js-tabs-tab': '',
} %}
{% if item.active|default(false) %}
{% set tab_attributes = tab_attributes|merge({'aria-selected': 'true'}) %}
{% endif %}
{% include '@partial-button' with {
classes: {
base: 'button-bordered'
},
id: id ~ '__tab-' ~ loop.index,
attributes: tab_attributes,
title: item.title
} only %}
{% endfor %}
</div>
<div class="tabs__panels">
{% for item in items %}
<div
class="tabs__panel"
id="{{ id ~ '__panel-' ~ loop.index }}"
role="tabpanel"
aria-labelledby="{{ id ~ '__tab-' ~ loop.index }}"
data-js-tabs-panel
>
<div class="tabs__panel-content">
{{ item.content }}
</div>
</div>
{% endfor %}
</div>
</{{ base_tag }}>
<!-- END: Tabs -->
</div>
No notes defined.