Regione Toscana Design System — Servizi Design System Core

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 */
.rtds-text-link {
    padding: var(--spacing-2);
    font-size: var(--fontsize-text-sm);
        color: var(--color-content-02);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}
.rtds-text-link:hover {
    text-decoration-line: underline;
        color: var(--color-content-02);
}
.rtds-text-link:focus {
        color: var(--color-content-02);
    }
.rtds-text-link:active {
        color: var(--color-content-01);
    }
@media (min-width: 768px) {
    .rtds-text-link {
        font-size: var(--fontsize-text-base);
    }
}
.rtds-text-link--has-cta {
    display: grid;
    align-items: center;
    gap: var(--spacing-2);
}
@media (min-width: 768px) {
    .rtds-text-link--has-cta {
        display: flex;
    }
}
.rtds-text-link--s {
    padding: var(--spacing-1);
    font-size: var(--fontsize-text-xs);
}
@media (min-width: 768px) {
    .rtds-text-link--s {
        padding: var(--spacing-2);
        font-size: var(--fontsize-text-sm);
    }
}
.rtds-text-link--contact {
    overflow-wrap: break-word;
    padding: var(--spacing-0);
    text-decoration-line: underline;
}
.rtds-text-link--contact:hover {
    text-decoration-line: none;
        color: var(--color-content-primary);
}
.rtds-text-link--contact:focus {
    text-decoration-line: none;
}
  • URL: /components/raw/text-link/text-link.built.css
  • Filesystem Path: components/02-atoms/text-link/text-link.built.css
  • Size: 1.3 KB
  • 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 è sempre renderizzato come <a> — link testuale con formattazione tipografica coerente col contesto editoriale. Supporta varianti di dimensione, icone opzionali e un pulsante CTA interno.

Varianti

Varianti di Dimensione

  • default: Dimensione standard
  • s: Dimensione piccola

Varianti di Stile

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

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

  • 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

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.4.3 Contrasto minimo — testo link su sfondo
  • 2.1.1 Tastiera — il link <a> è raggiungibile e attivabile da tastiera
  • 2.4.4 Scopo del collegamento (nel contesto) — il testo visibile o le etichette SR comunicano chiaramente la destinazione
  • 4.1.2 Nome, Ruolo, Valore — elemento <a> con nome accessibile garantito

Struttura e semantica

  • <a> — ruolo implicito link; raggiungibile con Tab, attivabile con Enter; il testo visibile (o le etichette SR) costituisce il nome accessibile del link
  • <span> interno (presente con cta) — puramente presentazionale; non introduce ruolo interattivo e non altera la semantica del link padre

Attributi ARIA

Attributo Valori Condizione
tabindex="-1" "-1" quando allyHidden è attivo
aria-hidden "true" quando allyHidden è attivo (nasconde il link agli screen reader)
Tasto Azione
Tab / Shift+Tab Sposta il focus sul/dal link
Enter Attiva il link

Gestione del focus

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

Screen reader

  • Il <span class="rtds-sr-only"> opzionale prima del testo visibile aggiunge contesto prefissato (es. “Scarica: “ prima del nome del documento) — lo screen reader lo legge come parte del nome del link
  • Il <span class="rtds-sr-only"> opzionale dopo il testo visibile disambigua link con la stessa etichetta (es. “– titolo dell’articolo”)
  • Il <span> CTA interno al link non introduce un ruolo interattivo separato — lo screen reader lo legge come parte del testo del link, non come elemento distinto
  • Quando il link ha tabindex="-1" e aria-hidden="true", è escluso completamente dallo screen reader — usare solo quando un’alternativa accessibile equivalente è già presente nella pagina

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 Modificatori

  • .rtds-text-link--has-cta: layout grid (md: flex), gap-2, 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, underline; hover no-underline content-primary

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