<a href="#" class="n7-tab is-tab transition-all n7-tab--default flex p-2 md:p-3 border-b-2 border-transparent text-sm md:text-base n7-content-01 hover:n7-background-02">
<span>tab label</span>
</a>
<{% if href %}a href="{{ href }}"{% else %}button{% endif %} class="n7-tab is-tab {% if ariaSelected %} aria-selected:{{borderColor}}{% endif %} transition-all{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock %}{% if isActive %} is-active{% endif %}"
{% if roleTab %}role="tab"{% endif %}
{% if id %}id="{{ id }}"{% endif %}
{% if ariaSelected %}aria-selected="{{ ariaSelected }}"{% endif %}
{% if tabIndex %}tabindex="-1"{% endif %}
{% if ariaControls %}aria-controls="{{ ariaControls }}"{% endif %}
{% if ariaCurrent %}aria-current="{{ ariaCurrent }}"{% endif %}
>
{% if iconLeft %}
{% render '@icon--small', { id: iconLeft, size: 'w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6' }, true %}
{% endif %}
<span>{{ label }}</span>
{% if iconRight %}
{% render '@icon--small', { id: iconRight, size: 'w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6' }, true %}
{% endif %}
</{% if href %}a{% else %}button{% endif %}>
{
"label": "tab label",
"href": "#",
"borderColor": "n7-border-gray-04",
"classes": "n7-tab--default flex p-2 md:p-3 border-b-2 border-transparent text-sm md:text-base n7-content-01 hover:n7-background-02"
}
/**
* TAB
*
*
*/
/* BASE */
@layer components {
.n7-tab--default.is-active {
@apply n7-border-gray-04;
}
.n7-tab--borderless.is-active {
@apply n7-background-03;
}
/* FILLED */
/* .n7-tab--filled {
@apply py-2 px-3 n7-background-02 rounded-md n7-content-01 text-lg hover:shadow-md focus:bg-white active:text-white active:n7-background-05 aria-selected:text-white aria-selected:n7-background-05;
} */
/*
.n7-tab--filled.is-active {
@apply text-white n7-background-05;
} */
}
Tab element. Configuration:
Blocks: