Chip: Category

Ready

HTML
View
Context
Assets
Info
Notes


        
        <span class="rtds-chip rtds-chip--category">
    <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#mini--computer-desktop" />
    </svg>

    <span class="rtds-sr-only">Categoria: </span>

    categoria</span>


        {% extends '@chip' %}
{% block classes %} rtds-chip--category{% if classes %} {{ classes }}{%- endif -%}{% endblock %}
{%- block icon -%}
    {% if icon and icon != 'none' %}
        {% render '@icon--small', { id: icon, size: 'rtds-w-4 rtds-h-4', classes: 'rtds-mr-1.5' }, true %}
    {% endif %}
{%- endblock -%}
{%- block close -%}{%- endblock -%}


        
            
            {
  "label": "categoria",
  "srLabel": "Categoria: ",
  "icon": "mini--computer-desktop"
}

File:

Content:


                                /**
 * CHIP
 *
*/
.rtds-chip {
    border-radius: 1rem;
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    font-size: var(--fontsize-text-sm);
        color: var(--color-content-01);
        border-color: var(--color-border-gray-04);
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    border-width: 1px;
}
.rtds-chip--sm {
    border-radius: 0.75rem;
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
    padding-top: var(--spacing-0-5);
    padding-bottom: var(--spacing-0-5);
    font-size: var(--fontsize-text-xs);
}
.rtds-chip--lg {
    border-radius: 1.5rem;
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    font-size: var(--fontsize-text-sm);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}
/* Chip category */
.rtds-chip--category {
    border-color: currentColor;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        color: var(--color-content-info);
}
/* Chip link - interactive */
.rtds-chip--interactive {
    background-color: transparent;
}
.rtds-chip--interactive:hover {
        background-color: var(--color-background-02);
    }
.rtds-chip--interactive:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        border-color: var(--color-border-gray-01);
}
.rtds-chip--interactive:active {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        background-color: var(--color-background-06);
        border-color: var(--color-border-gray-01);
}
.rtds-chip.is-selected {
        background-color: var(--color-background-06);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.rtds-chip__close {
    border-radius: 9999px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.rtds-chip__close:hover {
        color: var(--color-content-01);
        background-color: var(--color-background-02);
    }
.rtds-chip__close:focus {
        color: var(--color-content-01);
        background-color: var(--color-background-02);
    }
.rtds-chip__close:active {
        color: var(--color-content-01);
        background-color: var(--color-background-02);
    }
.rtds-chip__close::after {
    position: absolute;
    right: var(--spacing-0);
    display: block;
    height: var(--spacing-8);
    width: var(--spacing-8);
    --tw-content: '';
    content: var(--tw-content);
}
.rtds-chip.has-button-close {
    position: relative;
    padding-right: var(--spacing-2);
}
.rtds-chip.has-button-close.rtds-chip--sm {
    padding-right: var(--spacing-2);
}
.rtds-chip.has-button-close.rtds-chip--lg {
    padding-right: var(--spacing-2);
}
/* CHIP STATUS */
.rtds-chip--status.is-open {
    border-color: var(--color-bando-aperto);
    background-color: var(--color-bando-aperto);
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.rtds-chip--status.is-in-progress {
    border-color: var(--color-bando-in-attivazione);
    background-color: var(--color-bando-in-attivazione);
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.rtds-chip--status.is-closed {
    border-color: var(--color-archiviato);
    background-color: var(--color-archiviato);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Other status */
.rtds-chip--status.is-pending {
    border-color: var(--color-error-dark);
    background-color: var(--color-error-dark);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* CHIP FILTER */
.rtds-chip--filter {
        background-color: var(--color-background-06);
    gap: var(--spacing-2);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

URL: /components/raw/chip/chip.built.css
Filesystem Path: components/02-atoms/chip/chip.built.css
Size: 4 KB

Content:


                                /**
 * CHIP
 *
*/
@layer components {
    .rtds-chip {
        @apply rtds-inline-flex rtds-px-3 rtds-py-1 rtds-items-center rtds-border rtds-text-sm rtds-rounded-2xl rtds-font-bold rtds-border-gray-04 rtds-content-01;
    }

    .rtds-chip--sm {
        @apply rtds-px-2 rtds-py-0.5 rtds-rounded-xl rtds-text-xs;
    }

    .rtds-chip--lg {
        @apply rtds-px-4 rtds-py-2 rtds-rounded-3xl rtds-text-sm;
    }

    /* Chip category */
    .rtds-chip--category {
        @apply rtds-content-info rtds-border-current rtds-bg-white;
    }

    /* Chip link - interactive */
    .rtds-chip--interactive {
        @apply rtds-bg-transparent hover:rtds-background-02 focus:rtds-bg-white focus:rtds-border-gray-01 active:rtds-background-06 active:rtds-text-white active:rtds-border-gray-01;
    }

    .rtds-chip.is-selected {
        @apply rtds-background-06 rtds-text-white;
    }

    .rtds-chip__close {
        @apply rtds-inline-flex rtds-items-center rtds-justify-center rtds-rounded-full hover:rtds-background-02 hover:rtds-content-01 focus:rtds-background-02 focus:rtds-content-01 active:rtds-background-02 active:rtds-content-01 rtds-transition-all;
    }

    .rtds-chip__close {
        @apply after:rtds-content-[''] after:rtds-block after:rtds-right-0 after:rtds-w-8 after:rtds-h-8 after:rtds-absolute;
    }

    .rtds-chip.has-button-close {
        @apply rtds-pr-2 rtds-relative;
    }

    .rtds-chip.has-button-close.rtds-chip--sm {
        @apply rtds-pr-2;
    }

    .rtds-chip.has-button-close.rtds-chip--lg {
        @apply rtds-pr-2;
    }

    /* CHIP STATUS */
    .rtds-chip--status.is-open {
        @apply rtds-bg-bando-aperto rtds-border-bando-aperto rtds-text-black;
    }

    .rtds-chip--status.is-in-progress {
        @apply rtds-bg-bando-in-attivazione rtds-border-bando-in-attivazione rtds-text-black;
    }

    .rtds-chip--status.is-closed {
        @apply rtds-bg-archiviato rtds-border-archiviato rtds-text-white;
    }

    /* Other status */
    .rtds-chip--status.is-pending {
        @apply rtds-bg-error-dark rtds-border-error-dark rtds-text-white;
    }
    
    

    /* CHIP FILTER */
    .rtds-chip--filter {
        @apply rtds-gap-2 rtds-background-06 rtds-text-white;
    }
    
}

URL: /components/raw/chip/chip.css
Filesystem Path: components/02-atoms/chip/chip.css
Size: 2.2 KB

Handle: @chip--category
Variants (13): Default , Category , Tag , Tag Sm , Sm , Lg , Interactive , Filter , Status Aperto , Status In Corso , Status Chiuso , Status Pending , Status Custom
Preview:
- With layout
- Component only
Filesystem Path: components/02-atoms/chip/chip--category.njk
References (2): @chip, @icon--small
Referenced by (15): @card--information-02, @test-bundle, @accordion-smart, @accordion-smart--senza-azioni, @card-smart, @card-smart--accordion, @card-smart--agenda, @page-header-base-smart, @page-header-base-smart--no-notifiche, @page-header-base-smart--semplice, @page-header-articolo, @page-header-bando, @page-header-bando--closed, @page-header-bando--in-corso, @page-header-servizio

Chip

Componente per etichette interattive con supporto per diverse varianti, dimensioni e stati.

Comportamento

Il componente può essere renderizzato come:

 — elemento di default (senza href); usato per chip informativi, di categoria o di stato non interattivi
<a> — quando viene specificato href nel contesto Fractal/Nunjucks; chip cliccabile per navigazione o filtraggio

Varianti

Varianti di Stile

category: Per etichette di categoria
tag: Per etichette di tag
tag-sm: Per etichette di tag piccole
filter: Per filtri
interactive: Per chip cliccabili

Varianti di Dimensione

default: Dimensione standard
sm: Dimensione piccola
lg: Dimensione grande

Varianti di Stato

status-aperto: Stato “Aperto”
status-in-corso: Stato “In corso”
status-chiuso: Stato “Chiuso”

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

label (stringa, obbligatorio): Testo del chip
href (stringa, opzionale): URL per renderizzare come link
classes (stringa, opzionale): Classi CSS aggiuntive
hasBtnClose (booleano, opzionale): Aggiunge un pulsante di chiusura

Parametri per Icone

icon (stringa, opzionale): ID dell’icona da utilizzare

Parametri di Accessibilità

srLabel (stringa, opzionale): Etichetta per screen reader

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

1.4.3 Contrasto minimo — testo su sfondo per tutte le varianti di colore e stato
2.1.1 Tastiera — il pulsante di chiusura e il chip interattivo sono raggiungibili e attivabili da tastiera
2.4.4 Scopo del collegamento (nel contesto) — il testo del chip comunica chiaramente la destinazione o il filtro
4.1.2 Nome, Ruolo, Valore — il pulsante di chiusura ha un nome accessibile tramite

Struttura e semantica

 — nessun ruolo interattivo; non focusabile; usare per chip informativi, di categoria o di stato che non richiedono interazione
<a> — ruolo implicito link; raggiungibile con Tab, attivabile con Enter; usare per chip che navigano verso una destinazione o applicano un filtro
<button type="button"> (pulsante di chiusura) — ruolo implicito button; attivabile con Enter e Space; il nome accessibile è fornito dal  interno

Attributi ARIA

Attributo	Valori	Condizione
`aria-hidden`	`"true"`	sull’icona decorativa (tramite componente `@icon`)

Navigazione da tastiera

Tasto	Azione
`Tab` / `Shift+Tab`	Sposta il focus sul/dal chip (variante `<a>`) o sul pulsante di chiusura
`Enter`	Attiva il link / attiva il pulsante di chiusura
`Space`	Attiva il pulsante di chiusura

Gestione del focus

Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Il  opzionale prima del testo visibile aggiunge contesto prefissato (es. “Categoria: “, “Stato: “) — lo screen reader lo legge come parte del nome accessibile del chip
Il pulsante di chiusura ha un  con testo “Rimuovi [nome chip]” — lo screen reader annuncia l’azione e l’oggetto che verrà rimosso
Le icone decorative hanno aria-hidden="true" — lo screen reader le ignora

Stili CSS

Classi Base

.rtds-chip: Stile base del chip
- Layout: inline-flex, items-center
- Padding: px-3 py-1
- Font: bold, text-sm
- Bordi: border, rounded-2xl, border-gray-04
- Colore: content-01

Classi Modificatori

.rtds-chip--sm: padding ridotto, text-xs, rounded-xl
.rtds-chip--lg: padding aumentato, text-sm, rounded-3xl
.rtds-chip--category: colore content-info, bordo border-current, sfondo bg-white
.rtds-chip--interactive: hover background-02, focus bg-white border-gray-01
.rtds-chip--filter: gap-2, sfondo background-06, colore text-white

Classi di Stato

.rtds-chip--status.is-open: sfondo bg-bando-aperto, bordo border-bando-aperto, colore text-black
.rtds-chip--status.is-in-progress: sfondo bg-bando-in-attivazione, bordo border-bando-in-attivazione
.rtds-chip--status.is-closed: sfondo bg-archiviato, bordo border-archiviato, colore text-white

Classi Elementi (BEM)

.rtds-chip__close: pulsante di chiusura — inline-flex, dimensione w-5 h-5, rounded-full

Esempi di utilizzo

<!-- Chip standard -->
<span class="rtds-chip">Etichetta</span>

<!-- Chip con pulsante di chiusura -->
<span class="rtds-chip has-button-close">
  Etichetta
  <button class="rtds-chip__close">
    <svg class="rtds-icon">...</svg>
    <span class="rtds-sr-only">Rimuovi Etichetta</span>
  </button>
</span>

<!-- Chip interattivo -->
<a href="#" class="rtds-chip rtds-chip--interactive">Chip Cliccabile</a>

<!-- Chip di stato -->
<span class="rtds-chip rtds-chip--status is-open">
  <span class="rtds-sr-only">Stato: </span>
  Aperto
</span>

<!-- Chip di categoria -->
<span class="rtds-chip rtds-chip--category">
  <svg class="rtds-icon rtds-mr-1">...</svg>
  <span class="rtds-sr-only">Categoria: </span>
  Categoria
</span>