Section Title Link Text

Sezione generica con intestazione (divisore sinistra) e lista di link configurabili. Componente base riutilizzabile da sezioni più specifiche come @related-resources.

Comportamento

<section> con intestazione @section-header--divider-left e lista <ul> di link. Il tipo di link è configurabile tramite linkVariant (es. text-link, action-link--has-icon).

Varianti

• default: Lista di @text-link
• action-link: Lista di @action-link--has-icon

Dipendenze

• @section-header--divider-left — intestazione con divisore sinistro
• @text-link — link testuale (variante default)
• @action-link--has-icon — link con icona (variante action-link)

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 (passato a @section-header--divider-left)
• linkVariant (stringa, opzionale): Handle Fractal del componente link da usare. Default: text-link
• classes (stringa, opzionale): Classi CSS aggiuntive per la lista <ul>. Default: rtds-space-y-4
• href (stringa, opzionale): URL default per i link
• links (array, obbligatorio): Lista dei link. Ogni item viene passato come context al componente linkVariant. Campi supportati dipendono dal componente scelto:
  • label (stringa): Testo del link
  • href (stringa, opzionale): URL del link
  • icon (stringa, opzionale): Icona (per action-link--has-icon)

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">Approfondimenti</h2>
            
            
            
        </div>

        
            
        
    </div>
</div>
    </div>
    <ul  class="rtds-space-y-4">
        
            <li>
                <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>

        
        Guida alla compilazione
        
    
    
    
    
</a>
            </li>
        
            <li>
                <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>

        
        FAQ
        
    
    
    
    
</a>
            </li>
        
            <li>
                <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>

        
        Normativa di riferimento
        
    
    
    
    
</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">Link utili</h2>
            
            
            
        </div>

        
            
        
    </div>
</div>
    </div>
    <ul  class="rtds-space-y-4">
        
            <li>
                <a href="/servizi" class="rtds-action-link
      rtds-action-link--has-icon
">
            Portale servizi
        
         
            <svg
  class="rtds-icon rtds-fill-current"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--arrow-small-right" />
</svg>

        
        </a>
            </li>
        
            <li>
                <a href="/documenti" class="rtds-action-link
      rtds-action-link--has-icon
">
            Modulistica
        
         
            <svg
  class="rtds-icon rtds-fill-current"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--arrow-small-right" />
</svg>

        
        </a>
            </li>
        
    </ul>
</section>

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

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

Note

Questo componente è il template base per @related-resources. Usare @related-resources quando si ha bisogno di preset specifici per risorse correlate con layout a colonne.