Regione Toscana Design System

Link component: Icon Only 

<a href="" class="rtds-link ">
    <span class="rtds-sr-only">Link text</span>

    <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#mini--arrow-small-right" />
    </svg>

</a>
 
<a href=""{% if allyHidden %} tabindex="-1" aria-hidden="true"{% endif %} class="rtds-link{%- block classes %} {{ classes }}{%- endblock -%}">
    {%- block content -%}
        {% if iconOnly %}
            <span class="rtds-sr-only">{{ label }}</span>
        {% else %}
            {{ label }}
        {% endif %}
         {% if accessibleLabel %}<span class="rtds-sr-only">{{ accessibleLabel }}</span>{% endif %}
    {%- endblock -%}
    {%- block icon -%}
        {% if hasIcon %}
            {% render '@icon--small', { id: icon, size: iconSize, classes: 'rtds-ml-2' }, true %}
        {% endif %}
        {% if iconOnly %}
            {% render '@icon--medium', { id: icon, size: iconSize }, true %}
        {% endif %}
    {%- endblock -%}
</a>
 
{
  "label": "Link text",
  "icon": "mini--arrow-small-right",
  "iconSize": "rtds-w-5 rtds-h-5",
  "iconOnly": true
}
  • Content: 
    /* LINK */
@layer components {
    .rtds-link {
        @apply rtds-inline-flex rtds-items-center rtds-link-primary hover:rtds-underline hover:rtds-link-primary-hover focus:rtds-text-primary-800 rtds-text-base md:rtds-text-base;
    }

    .rtds-link--sm {
        @apply rtds-text-sm;
    }

    .rtds-link--lg {
        @apply rtds-text-lg;
    }

    .rtds-link--underline {
        @apply rtds-underline;
    }

    .rtds-link--secondary {
        @apply rtds-content-02 hover:rtds-content-02;
    }
}
  • URL: /components/raw/link/link.css
  • Filesystem Path: components/02-atoms/link/link.css
  • Size: 505 Bytes

Link

Componente per link con supporto per diverse dimensioni e icone.

Comportamento

Il componente renderizza un elemento <a> che:

  • Supporta l’accessibilità con etichette per screen reader
  • Può essere nascosto agli screen reader quando necessario
  • Supporta diverse dimensioni di testo
  • Può includere icone opzionali

Varianti

Varianti di Dimensione

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

Varianti con Icone

  • has-icon: Link con icona a destra
  • icon-only: Solo icona cliccabile

Parametri di Configurazione

Parametri Base

  • label (stringa, obbligatorio): Testo del link
  • href (stringa, obbligatorio): URL del link
  • classes (stringa, opzionale): Classi CSS aggiuntive
  • allyHidden (booleano, opzionale): Nasconde il link agli screen reader

Parametri per Icone

  • icon (stringa, opzionale): ID dell’icona da utilizzare
  • iconSize (stringa, opzionale): Classi CSS per la dimensione dell’icona
  • hasIcon (booleano, opzionale): Abilita la visualizzazione dell’icona
  • iconOnly (booleano, opzionale): Mostra solo l’icona come link

Parametri di Accessibilità

  • accessibleLabel (stringa, opzionale): Etichetta aggiuntiva per screen reader

Stili CSS

Classi Base

  • .rtds-link: Stile base del link
    • Layout: inline-flex, items-center
    • Colore: link-primary
    • Font: text-base
    • Stati:
      • Hover: underline, link-primary-hover
      • Focus: text-primary-800

Classi per Dimensioni

  • .rtds-link--sm: text-sm
  • .rtds-link--lg: text-lg
  • .rtds-link--underline: underline

Esempio di Utilizzo

<!-- Link standard -->
<a href="#" class="rtds-link">Link Text</a>

<!-- Link piccolo -->
<a href="#" class="rtds-link rtds-link--sm">Link Piccolo</a>

<!-- Link grande -->
<a href="#" class="rtds-link rtds-link--lg">Link Grande</a>

<!-- Link con icona -->
<a href="#" class="rtds-link">
  Link con Icona
  <svg class="rtds-icon rtds-ml-2">...</svg>
</a>

<!-- Link solo icona -->
<a href="#" class="rtds-link">
  <span class="rtds-sr-only">Link Text</span>
  <svg class="rtds-icon">...</svg>
</a>

<!-- Link con etichetta aggiuntiva -->
<a href="#" class="rtds-link">
  Link Text
  <span class="rtds-sr-only">Etichetta Aggiuntiva</span>
</a>