Sezione Related Resources (Risorse Correlate)

Sezione per risorse correlate e link di approfondimento, con intestazione e lista di link configurabili. Estende @section-title-link-text.

Comportamento

Estende @section-title-link-text con preset per risorse correlate. Supporta link @text-link o @action-link--has-icon e layout a colonne multipli.

Varianti

• default: Lista verticale di text-link
• cols-2: Griglia 2 colonne da xl
• cols-3: Griglia 3 colonne da xl

Dipendenze

• @section-title-link-text — template base della sezione
• @text-link — link testuale (variante default)
• @action-link--has-icon — link con icona azione

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.

• title (stringa, obbligatorio): Titolo della sezione
• linkVariant (stringa, opzionale): Variante del componente link. Default: text-link
• classes (stringa, opzionale): Classi CSS aggiuntive per la lista (es. xl:rtds-grid xl:rtds-grid-cols-2)
• links (array, obbligatorio): Lista di link. Ogni item accetta:
  • label (stringa): Testo del link
  • href (stringa): URL destinazione
  • icon (stringa, opzionale): Icona (es. mini--arrow-top-right-on-square per link esterni)
  • accessibleLabel (stringa, opzionale): Testo aggiuntivo per screen reader (es. "- link esterno - apre in una nuova scheda")
  • classes (stringa, opzionale): Classi CSS del singolo link

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 2.4.4 Scopo del collegamento (nel contesto) — ogni link deve avere testo descrittivo; usare accessibleLabel per aggiungere informazioni agli screen reader (es. "- link esterno - apre in una nuova scheda")
• 1.3.1 Informazioni e correlazioni — la sezione è un <section> con intestazione tramite @section-header--divider-left

Esempi di utilizzo

<section class="rtds-space-y-4 md:rtds-space-y-6">
    <div>
        <div class="rtds-section-header">
    <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">Documenti correlati</h2>
            
            
            
        </div>

        
            
        
    </div>
</div>
    </div>
    <ul >
        
            <li>
                <a href="/documents/disciplinare.pdf" 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#mini--arrow-top-right-on-square" />
</svg>

        
        Disciplinare tecnico (PDF)
        <span class="rtds-sr-only">- apre in una nuova scheda</span>
    
    
    
    
</a>
            </li>
        
    </ul>
</section>


<section class="rtds-space-y-4 md:rtds-space-y-6">
    <div>
        <div class="rtds-section-header">
    <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">Titolo sezione</h2>
            
            
            
        </div>

        
            
        
    </div>
</div>
    </div>
    <ul  class="xl:rtds-grid xl:rtds-grid-cols-2 xl:rtds-gap-x-12 ">
        
            <li>
                <a href="#" class="rtds-text-link rtds-border-b rtds-border-gray-03 rtds-w-full rtds-h-full">
    
            <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#mini--arrow-top-right-on-square" />
</svg>

        
        Link esterno target blank Disciplinare mensa e buoni pasto disposizioni in vigore dal 1.5.2024
        <span class="rtds-sr-only">- link esterno -apre in una nuova scheda</span>
    
    
    
    
</a>
            </li>
        
            <li>
                <a href="#" class="rtds-text-link rtds-border-b rtds-border-gray-03 rtds-w-full rtds-h-full">
    
            <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#outline--document-text" />
</svg>

        
        Documento Lorem ipsum
        <span class="rtds-sr-only">- documento</span>
    
    
    
    
</a>
            </li>
        
            <li>
                <a href="#" class="rtds-text-link rtds-border-b rtds-border-gray-03 rtds-w-full rtds-h-full">
    
            <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>

        
        Lorem ipsum sit amet
        
    
    
    
    
</a>
            </li>
        
            <li>
                <a href="#" class="rtds-text-link rtds-border-b rtds-border-gray-03 rtds-w-full rtds-h-full">
    
            <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>

        
        Lorem ipsum
        
    
    
    
    
</a>
            </li>
        
            <li>
                <a href="#" class="rtds-text-link rtds-border-b rtds-border-gray-03 rtds-w-full rtds-h-full">
    
            <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>

        
        Lorem ipsum sit amet
        
    
    
    
    
</a>
            </li>
        
    </ul>
</section>
<section class="rtds-space-y-4 md:rtds-space-y-6">
    <div>
        <div class="rtds-section-header">
    <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">Titolo sezione</h2>
            
            
            
        </div>

        
            
        
    </div>
</div>
    </div>
    <ul  class="xl:rtds-grid xl:rtds-grid-cols-3 xl:rtds-gap-x-12">
        
            <li>
                <a href="#" class="rtds-text-link rtds-border-b rtds-border-gray-03 rtds-w-full rtds-h-full">
    
            <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#mini--arrow-top-right-on-square" />
</svg>

        
        Link esterno target blank Disciplinare mensa e buoni pasto disposizioni in vigore dal 1.5.2024
        <span class="rtds-sr-only">- link esterno -apre in una nuova scheda</span>
    
    
    
    
</a>
            </li>
        
            <li>
                <a href="#" class="rtds-text-link rtds-border-b rtds-border-gray-03 rtds-w-full rtds-h-full">
    
            <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#outline--document-text" />
</svg>

        
        Documento Lorem ipsum
        <span class="rtds-sr-only">- documento</span>
    
    
    
    
</a>
            </li>
        
            <li>
                <a href="#" class="rtds-text-link rtds-border-b rtds-border-gray-03 rtds-w-full rtds-h-full">
    
            <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>

        
        Lorem ipsum sit amet
        
    
    
    
    
</a>
            </li>
        
            <li>
                <a href="#" class="rtds-text-link rtds-border-b rtds-border-gray-03 rtds-w-full rtds-h-full">
    
            <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>

        
        Lorem ipsum
        
    
    
    
    
</a>
            </li>
        
            <li>
                <a href="#" class="rtds-text-link rtds-border-b rtds-border-gray-03 rtds-w-full rtds-h-full">
    
            <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>

        
        Lorem ipsum sit amet
        
    
    
    
    
</a>
            </li>
        
    </ul>
</section>