tabler/pages/_includes/cards/tabs.html

{% assign id = 0 | random_id %}
{% if include.id %}
   {% assign id = include.id %}
{% endif %}
{% assign icon-class = "me-2" %}
{% if include.hide-text %}
   {% assign icon-class = "" %}
{% endif %}
{% assign reverse = include.reverse | default: false %}

<div class="card">
	<div class="card-header">
		<ul class="nav nav-tabs card-header-tabs{% if reverse %} flex-row-reverse{% endif %}{% if include.justified %} nav-fill{% endif %}" data-bs-toggle="tabs">
			<li class="nav-item">
				<a href="#tabs-home-{{ id }}" class="nav-link active" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="home" class=icon-class %}{% endif %}{% unless include.hide-text %}Home{% endunless %}</a>
			</li>
			<li class="nav-item">
				<a href="#tabs-profile-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="user" class=icon-class %}{% endif %}{% unless include.hide-text %}Profile{% endunless %}</a>
			</li>

			{% if include.activity %}
			<li class="nav-item">
				<a href="#tabs-activity-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="activity" class=icon-class %}{% endif %}{% unless include.hide-text %}Activity{% endunless %}</a>
			</li>
			{% endif %}

			{% if include.disabled %}
			<li class="nav-item">
				<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="x" class=icon-class %}{% endif %}{% unless include.hide-text %}Disabled{% endunless %}</a>
			</li>
			{% endif %}

			{% if include.dropdown %}
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
				{% include "ui/dropdown-menu.html" %}
			</li>
			{% endif %}
			{% if include.settings %}
			<li class="nav-item {% if reverse %}me-auto{% else %}ms-auto{% endif %}">
				<a href="#tabs-settings-{{ id }}" class="nav-link" title="Settings" data-bs-toggle="tab">{% include "ui/icon.html" icon="settings" %}</a>
			</li>
			{% endif %}
		</ul>
	</div>
	<div class="card-body">
		<div class="tab-content">
			<div class="tab-pane{% if include.animation %} fade{% endif %} active show" id="tabs-home-{{ id }}">
				<h4>Home tab</h4>
				<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
			</div>
			<div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-profile-{{ id }}">
				<h4>Profile tab</h4>
				<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
			</div>
			{% if include.settings %}
			<div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-settings-{{ id }}">
				<h4>Settings tab</h4>
				<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
			</div>
			{% endif %}
			{% if include.activity %}
			<div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-activity-{{ id }}">
				<h4>Activity tab</h4>
				<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
			</div>
			{% endif %}
		</div>
	</div>
</div>