Regione Toscana Design System Design System Servizi

Links: Column 

<section class="rtds-section rtds-section--links rtds-py-8 md:rtds-py-12">
    <div class="rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--links">
            <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
                <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">

                    <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
                        <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
                    </div>

                    <h2 class="rtds-heading-3 md:rtds-heading-2">Link utili</h2>

                </div>

            </div>
        </div>

        <div class="">

            <ul role="list" class="xl:rtds-columns-2 xl:rtds-gap-12">

                <li class="rtds-border-b rtds-border-gray-03">
                    <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>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <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>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <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>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <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>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <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>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <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>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <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>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <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>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

            </ul>
        </div>
    </div>
</section>
 
<section class="rtds-section rtds-section--links rtds-py-8 md:rtds-py-12">
    <div class="rtds-space-y-4">
        {% render '@section-header--divider-left', { 
            classes: 'rtds-section-header--links',
            heading: 'Link utili'
            }, true %}

        <div class="">
            
            <ul role="list" class="xl:rtds-columns-2 xl:rtds-gap-12">

                {% for i in range(0, items) %}
                    <li class="rtds-border-b rtds-border-gray-03">
                    {% render '@text-link', {
                        label: 'Agenzia europea per la sicurezza alimentare - EFSA',
                        url: ''
                        }, true %}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</section>
 
{
  "items": 8,
  "heading": "Titolo sezione",
  "verticalDividerLeft": "",
  "verticalDividerRight": true
}

Sezione Links

Sezione con lista di link testuali, usata per collegamenti a risorse esterne o pagine correlate.

Comportamento

<section> con intestazione @section-header e lista di link @text-link. Ogni link è separato da un bordo inferiore. La variante column dispone i link su 2 colonne da xl.

Varianti

  • default: Lista verticale di link
  • column: Lista a 2 colonne su schermi xl

Dipendenze

  • @section-header — intestazione sezione (con divisore sinistro o destro configurabile)
  • @text-link — link testuale

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 da usare nei temi o ambienti di implementazione.

  • items (numero, opzionale): Numero di link. Default: 3 (default), 8 (variante column)
  • heading (stringa, opzionale): Titolo della sezione. Default: "Titolo sezione"
  • verticalDividerLeft (stringa, opzionale): Presenza divisore verticale sinistro
  • verticalDividerRight (booleano, opzionale): Presenza divisore verticale destro. Default: true

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — la sezione è un <section> con intestazione @section-header; la lista è una <ul> semantica con role="list"
  • 2.4.4 Scopo del collegamento (nel contesto) — ogni link deve avere testo descrittivo della destinazione

Stili CSS

  • .rtds-section--links: Modificatore della sezione
  • Ogni <li> ha border-b border-gray-03

Esempi di utilizzo

<section class="rtds-section rtds-section--links rtds-py-8 md:rtds-py-12">
    <div class="rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--links">
    <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
        <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">
            
            <h2 class="rtds-heading-3 md:rtds-heading-2">Risorse correlate</h2>
            
                <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

            
            
            
        </div>

        
            
        
    </div>
</div>

        <div class="">
            
            <ul role="list" class="xl:rtds-gap-12">

                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
            </ul>
        </div>
    </div>
</section>

<section class="rtds-section rtds-section--links rtds-py-8 md:rtds-py-12">
    <div class="rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--links">
    <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
        <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">
            
                <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

            
            <h2 class="rtds-heading-3 md:rtds-heading-2">Link utili</h2>
            
            
            
        </div>

        
            
        
    </div>
</div>

        <div class="">
            
            <ul role="list" class="xl:rtds-columns-2 xl:rtds-gap-12">

                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
                    <li class="rtds-border-b rtds-border-gray-03">
                    <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>

        
        Agenzia europea per la sicurezza alimentare - EFSA
        
    
    
    
    
</a>
                    </li>
                
            </ul>
        </div>
    </div>
</section>