Regione Toscana Design System Design System Servizi

Category: Icon Left 

<span class="rtds-category "><svg class="rtds-icon rtds-fill-current rtds-w-2 rtds-h-2" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#solid--circle" />
    </svg>

    <span>Category label</span>
</span>
 
{% extends '@category' %}

{%- block before -%}
    {% render '@icon--small', { id: icon, size: 'rtds-w-2 rtds-h-2' }, true %}
{%- endblock before -%}

{% block content %}<span{% if contentClasses %} class="{{ contentClasses }}"{% endif %}>{{ text }}</span>{% endblock %}
 
{
  "text": "Category label",
  "icon": "solid--circle"
}
  • Content: 
    /**
 * CATEGORY
 *
*/
.rtds-category {
    border-right-width: 1px;
    border-style: solid;
    padding-right: var(--spacing-2);
    font-size: var(--fontsize-text-sm);
    text-transform: uppercase;
        color: var(--color-content-category);
        border-color: var(--color-border-gray-02);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 700;
}
.rtds-category:last-of-type {
    border-right-width: 0px;
    padding-right: var(--spacing-0);
}
a:where(.rtds-category):hover {
    color: var(--color-primary-800);
    text-decoration-line: underline;
}
a:where(.rtds-category):focus {
    color: var(--color-primary-800);
}
.rtds-category--sm {
    font-size: var(--fontsize-text-xs);
}
.rtds-category--lg {
    font-size: var(--fontsize-text-base);
}
.rtds-category--outline {
    border-radius: 0.25rem;
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    border-width: 1px;
}
.rtds-category--outline:last-of-type {
    border-right-width: 1px;
}
.rtds-category--overline {
        color: var(--color-content-placeholder);
    }
  • URL: /components/raw/category/category.built.css
  • Filesystem Path: components/02-atoms/category/category.built.css
  • Size: 1.2 KB
  • Content: 
    /**
 * CATEGORY
 *
*/
@layer components {
    .rtds-category {
        @apply rtds-inline-flex rtds-items-center rtds-gap-2 rtds-pr-2 rtds-uppercase rtds-font-bold rtds-text-sm rtds-border-r rtds-border-solid rtds-border-gray-02 last-of-type:rtds-border-r-0 last-of-type:rtds-pr-0 rtds-content-category;
    }

    a:where(.rtds-category) {
        @apply hover:rtds-underline hover:rtds-text-primary-800 focus:rtds-text-primary-800;
    }

    .rtds-category--sm {
        @apply rtds-text-xs;
    }

    .rtds-category--lg {
        @apply rtds-text-base;
    }

    .rtds-category--outline {
        @apply rtds-px-2 rtds-py-1 rtds-rounded rtds-border last-of-type:rtds-border-r;
    }

    .rtds-category--overline {
        @apply rtds-content-placeholder;
    }
}
  • URL: /components/raw/category/category.css
  • Filesystem Path: components/02-atoms/category/category.css
  • Size: 769 Bytes

Category

Componente per etichette di categoria con supporto per diverse varianti e dimensioni.

Comportamento

Il componente può essere renderizzato come:

  • <span> — elemento di default (senza href); usato per etichette di categoria puramente informative, non navigabili
  • <a> — quando viene specificato href nel contesto Fractal/Nunjucks; etichetta cliccabile che funge da filtro o navigazione verso la categoria

Varianti

Varianti di Dimensione

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

Varianti di Stile

  • outline: Stile con bordo e padding
  • overline: Stile con linea superiore
  • overline-sm: Stile con linea superiore e dimensione piccola
  • icon-left: Con icona a sinistra

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

  • text (stringa, obbligatorio): Testo della categoria
  • href (stringa, opzionale): URL per renderizzare come link
  • classes (stringa, opzionale): Classi CSS aggiuntive

Parametri per Icone

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

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.4.3 Contrasto minimo — testo su sfondo
  • 2.1.1 Tastiera — quando renderizzato come <a>, il componente è raggiungibile e attivabile da tastiera
  • 2.4.4 Scopo del collegamento (nel contesto) — il testo della categoria comunica chiaramente la destinazione o il filtro applicato

Struttura e semantica

  • <span> — nessun ruolo interattivo; non focusabile; usare per etichette di categoria puramente informative
  • <a> — ruolo implicito link; raggiungibile con Tab, attivabile con Enter; usare per categorie navigabili o per applicare un filtro
Tasto Azione
Tab / Shift+Tab Sposta il focus sul/dal link (solo variante <a>)
Enter Attiva il link di categoria

Gestione del focus

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

Screen reader

  • <a> — annunciato come link; il testo della categoria costituisce il nome accessibile; lo screen reader comunica il ruolo “link” e la destinazione
  • <span> — annunciato come testo semplice; lo screen reader non comunica alcun ruolo interattivo né azione associata

Stili CSS

Classi Base

  • .rtds-category: Stile base della categoria
    • Font: bold, uppercase
    • Dimensione testo: text-sm
    • Colore: text-primary-600
    • Layout: inline-flex, items-center, gap-2
    • Bordo: border-r, border-solid, border-gray-02
    • Ultimo elemento: border-r-0, pr-0

Classi Modificatori

  • .rtds-category--sm: text-xs
  • .rtds-category--lg: text-base
  • .rtds-category--outline: padding px-2 py-1, bordi rounded e border
  • .rtds-category--overline: stile con linea superiore

Esempi di utilizzo

<!-- Categoria standard -->
<span class="rtds-category">Categoria</span>

<!-- Categoria come link -->
<a href="#" class="rtds-category">Categoria Link</a>

<!-- Categoria con bordo -->
<a href="#" class="rtds-category rtds-category--outline">Categoria con Bordo</a>

<!-- Categoria con linea superiore -->
<span class="rtds-category rtds-category--overline">Categoria con Linea Superiore</span>

<!-- Categoria con icona -->
<span class="rtds-category">
  <svg class="rtds-icon">...</svg>
  Categoria con Icona
</span>