Regione Toscana Design System

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
 *
*/
@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>