Regione Toscana Design System

Text link component 

<a href="#" class="rtds-text-link rtds-leading-snug">

    <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#solid--link" />
    </svg>

    Link text (PDF - 40Kb)

</a>
 
<a href="{{ href }}"{% if allyHidden %} tabindex="-1" aria-hidden="true"{% endif %} class="rtds-text-link{%- block classes %} {{ classes }}{%- endblock -%}{% if cta %} rtds-text-link--has-cta{% endif %}">
    {% if rightContent or cta %}<span class="rtds-flex rtds-gap-2 rtds-items-center">{% endif %}
    {%- block icon -%}
        {% if hasIcon or icon %}
            {% render '@icon--small', { id: icon, size: iconSize }, true %}
        {% endif %}
    {%- endblock -%}
    {%- block content -%}
        {% if accessibleLabelBefore %}<span class="rtds-sr-only">{{ accessibleLabelBefore }}</span>{% endif %}
        {{ label }}
        {% if accessibleLabel %}<span class="rtds-sr-only">{{ accessibleLabel }}</span>{% endif %}
    {%- endblock -%}
    {% if rightContent or cta %}</span>{% endif %}
    {% block rightContent %}
    {% if rightContent %}
    {% endif %}
    {% if cta %}
        {% render '@button--icon-right',{classes:'rtds-btn--only-text rtds-btn--s rtds-ml-auto', span: 'true', label: 'Scarica', id: iconCta },true %}
    {% endif %}
    {% endblock rightContent %}
</a>
 
{
  "href": "#",
  "label": "Link text (PDF - 40Kb)",
  "icon": "solid--link",
  "iconSize": "rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0",
  "classes": "rtds-leading-snug"
}
  • Content: 
    /* LINK */
@layer components {
    .rtds-text-link {
        @apply rtds-inline-flex rtds-gap-2 rtds-p-2 rtds-items-center rtds-content-02 hover:rtds-underline hover:rtds-content-02 focus:rtds-content-02 active:rtds-content-01 rtds-text-sm md:rtds-text-base;
    }

    .rtds-text-link--has-cta {
        @apply rtds-grid md:rtds-flex rtds-gap-2 rtds-items-center;
    }

    .rtds-text-link--s {
        @apply rtds-p-1 md:rtds-p-2 rtds-text-xs md:rtds-text-sm;
    }

    .rtds-text-link--contact {
        @apply rtds-p-0 rtds-underline hover:rtds-no-underline focus:rtds-no-underline hover:rtds-content-primary rtds-break-words;
    }

}
  • URL: /components/raw/text-link/text-link.css
  • Filesystem Path: components/02-atoms/text-link/text-link.css
  • Size: 641 Bytes

Text Link

Componente per link di testo con supporto per diverse varianti, icone e CTA.

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
  • Supporta un pulsante CTA opzionale

Varianti

Varianti di Dimensione

  • default: Dimensione standard
  • s: Dimensione piccola

Varianti di Tipo

  • has-cta: Link con pulsante CTA
  • contact: Link per contatti (es. numeri di telefono)
  • aggiornamenti: Link per aggiornamenti

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

Parametri per CTA

  • cta (booleano, opzionale): Abilita il pulsante CTA
  • iconCta (stringa, opzionale): ID dell’icona per il pulsante CTA

Parametri di Accessibilità

  • accessibleLabelBefore (stringa, opzionale): Etichetta aggiuntiva per screen reader - precede il label
  • accessibleLabel (stringa, opzionale): Etichetta aggiuntiva per screen reader - segue il label

Stili CSS

Classi Base

  • .rtds-text-link: Stile base del link
    • Layout: inline-flex, gap-2, items-center
    • Padding: p-2
    • Font: text-sm (md: text-base)
    • Colore: content-02
    • Stati:
      • Hover: underline, content-02
      • Focus: content-02
      • Active: content-01

Classi per Varianti

  • .rtds-text-link--has-cta:
    • Layout: grid (md: flex)
    • Gap: gap-2
    • Items: items-center
  • .rtds-text-link--s:
    • Padding: p-1 (md: p-2)
    • Font: text-xs (md: text-sm)
  • .rtds-text-link--contact:
    • Padding: p-0
    • Bordi: underline
    • Stati:
      • Hover: no-underline, content-primary
      • Focus: no-underline
    • Testo: break-words

Esempio di Utilizzo

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

<!-- Link piccolo -->
<a href="#" class="rtds-text-link rtds-text-link--s">
  <svg class="rtds-icon">...</svg>
  Link Piccolo
</a>

<!-- Link con CTA -->
<a href="#" class="rtds-text-link rtds-text-link--has-cta">
  <svg class="rtds-icon">...</svg>
  Link con CTA
  <button class="rtds-btn rtds-btn--only-text rtds-btn--s rtds-ml-auto">
    Scarica
  </button>
</a>

<!-- Link contatto -->
<a href="tel:02123456789" class="rtds-text-link rtds-text-link--contact">
  <svg class="rtds-icon">...</svg>
  02 123456789
</a>

<!-- Link aggiornamenti -->
<a href="#" class="rtds-text-link">
  Nome Tema
</a>