<span class="n7-chip n7-chip--category"><svg class="n7-icon inline-block align-middle fill-current w-4 h-4 mr-1.5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--computer-desktop" />
</svg>
<span class="sr-only">Categoria: </span>
categoria</span>
{% extends '@chip' %}
{% block classes %} n7-chip--category{% if class %} {{ class }}{%- endif -%}{% endblock %}
{%- block icon -%}
{% render '@icon--small', { id: icon,size: 'w-4 h-4', classes: 'mr-1.5' }, true %}
{%- endblock -%}
{%- block close -%}{%- endblock -%}
{
"label": "categoria",
"srLabel": "Categoria: ",
"classes": "n7-content-info border-current bg-white",
"icon": "mini--computer-desktop"
}
/**
* CHIP
*
*/
@layer components {
.n7-chip {
@apply inline-flex px-4 py-1 items-center border rounded-2xl n7-background-02;
}
.n7-chip--sm {
@apply px-2 py-0.5 rounded-xl text-sm;
}
.rtds-chip--lg {
@apply px-4 py-2 rounded-3xl text-sm;
}
/* Chip link - interactive */
.n7-chip--interactive {
@apply n7-border-primary n7-content-primary bg-transparent hover:n7-background-primary-light focus:bg-white focus:n7-border-gray-01 active:n7-background-primary-light active:n7-border-primary;
}
/* CHIP FILTER */
.n7-chip.has-btn-close {
@apply inline-flex items-center justify-center gap-1 relative;
}
.rtds-chip--filter {
@apply gap-2 n7-background-06 text-white;
}
.n7-chip__close {
@apply inline-flex items-center justify-center rounded-full hover:n7-background-02 hover:n7-content-01 focus:n7-background-02 focus:n7-content-01 active:n7-background-02 active:n7-content-01 transition-all;
}
.n7-chip__close {
@apply after:content-[''] after:block after:right-0 after:w-8 after:h-8 after:absolute;
}
/* CHIP STATUS */
/* .n7-chip--status.is-open {
@apply bg-bando-aperto border-bando-aperto text-black;
}
.n7-chip--status.is-in-progress {
@apply bg-bando-in-attivazione border-bando-in-attivazione text-black;
}
.n7-chip--status.is-closed {
@apply bg-archiviato border-archiviato text-white;
} */
}
Chip component and its variants.
Chip can have a screen reader label (sr-only, in the example), depend on the context, if there’s an explicit textual label presenting the chip it can be omitted.
It’s available in 3 size: sm, default (no class is needed), lg.
Blocks: