Regione Toscana Design System

Category: Overline Sm 

<span class="rtds-category rtds-category--overline rtds-category--sm">
    Category label
</span>
 
<{% if href %}a href="{{ href }}"{% else %}span{% endif %} class="rtds-category{% block classes %} {{ classes }}{% endblock %}">
    {%- block before -%}{%- endblock before %}
    {% block content %}{{ text }}{% endblock %}
</{% if href %}a{% else %}span{% endif %}>
 
{
  "text": "Category label",
  "classes": "rtds-category--overline rtds-category--sm"
}
  • 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> (default)
  • <a> (quando viene specificato href)

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

Varianti con Icone

  • icon-left: Con icona a sinistra

Parametri di Configurazione

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

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 per Dimensioni

  • .rtds-category--sm: text-xs
  • .rtds-category--lg: text-base

Classi per Stili

  • .rtds-category--outline:
    • Padding: px-2 py-1
    • Bordi: rounded, border
    • Ultimo elemento: border-r
  • .rtds-category--overline: content-placeholder
  • Hover: underline, text-primary-800
  • Focus: text-primary-800

Esempio 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>