Tabs
The tabs component can be used to display an unordered list as links or as a way to show and hide content.
Stand alone tab styling can be used without JS or any tab content.
However, in order for tabs and tab content to work, JS must be added.
Add the class js-tabs to the wrapper if you'd like that functionality.
Requires: dist/js/tabs.bundle.js
Optional Title
Tab Body Zip
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique purus ante, ac pulvinar augue luctus eu. Donec erat ex, dictum ac libero eget, vestibulum commodo ipsum. Praesent erat libero, porttitor eget iaculis vel, rutrum sed elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lobortis ipsum, vitae iaculis odio. Donec elementum metus et orci convallis, a fermentum eros efficitur. Duis ligula leo, ornare vel justo vel, sagittis eleifend sem.
Tab Body State
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique purus ante, ac pulvinar augue luctus eu. Donec erat ex, dictum ac libero eget, vestibulum commodo ipsum. Praesent erat libero, ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lobortis ipsum, vitae iaculis odio. Donec elementum metus et orci convallis, a fermentum eros efficitur. Duis ligula leo, ornare vel justo vel, sagittis eleifend sem.
Tab Body Country
Consectetur adipiscing elit. Cras tristique purus ante, ac pulvinar augue luctus eu. Donec erat ex, dictum ac libero eget, vestibulum commodo ipsum. Praesent erat libero, porttitor eget iaculis vel, rutrum sed elit. ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lobortis ipsum, vitae iaculis odio. Donec elementum metus et orci convallis, a fermentum eros efficitur. Duis ligula leo, ornare vel justo vel, sagittis eleifend sem.
Optional Title
Tab Body Zip
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique purus ante, ac pulvinar augue luctus eu. Donec erat ex, dictum ac libero eget, vestibulum commodo ipsum. Praesent erat libero, porttitor eget iaculis vel, rutrum sed elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lobortis ipsum, vitae iaculis odio. Donec elementum metus et orci convallis, a fermentum eros efficitur. Duis ligula leo, ornare vel justo vel, sagittis eleifend sem.
Tab Body State
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique purus ante, ac pulvinar augue luctus eu. Donec erat ex, dictum ac libero eget, vestibulum commodo ipsum. Praesent erat libero, ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lobortis ipsum, vitae iaculis odio. Donec elementum metus et orci convallis, a fermentum eros efficitur. Duis ligula leo, ornare vel justo vel, sagittis eleifend sem.
Tab Body Country
Consectetur adipiscing elit. Cras tristique purus ante, ac pulvinar augue luctus eu. Donec erat ex, dictum ac libero eget, vestibulum commodo ipsum. Praesent erat libero, porttitor eget iaculis vel, rutrum sed elit. ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lobortis ipsum, vitae iaculis odio. Donec elementum metus et orci convallis, a fermentum eros efficitur. Duis ligula leo, ornare vel justo vel, sagittis eleifend sem.
{{ attach_library('h4h_theme/tabs') }}
<section class="tabs {{ modifier_class }} js-tabs">
{% if title %}
{% set heading_level = heading_level|default(2) %}
<h{{ heading_level }} class="section-title__heading">{{ title }}</h{{ heading_level }}>
{% endif %}
<ul class="tabs__list">
{% for tab in tabs %}
<li class="tabs__item {{ tab.classes }}">
<a class="tabs__link" href="{{ tab.link }}">{{ tab.text }}</a>
</li>
{% endfor %}
</ul>
{% if (tabs_content) %}
<div class="tabs__panel-wrapper">
{% for content in tabs_content %}
<section id="{{ content.id }}" class="tabs__panel {{ content.classes }}">
{{ content.body }}
</section>
{% endfor %}
</div>
{% endif %}
</section>