Area Loghi

Componente per la visualizzazione di un’area contenente loghi, tipicamente nel footer. Supporta un logo principale posizionato a sinistra e una lista di loghi secondari con layout responsive.

Comportamento

Il componente è renderizzato come <div class="rtds-logos-area">. Il logo principale (componente @logo) viene mostrato solo se mainLogo è uguale alla stringa 'true'; è posizionato a sinistra con md:rtds-mr-auto per spingere i loghi secondari a destra. Se il parametro heading è presente, viene renderizzato un <h2> come titolo della sezione.

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria.

Parametri Base

• mainLogo (stringa, opzionale): Se uguale a 'true', mostra il logo principale (@logo) a sinistra. Nota: il confronto nel template usa == 'true' (stringa, non booleano).
• heading (stringa, opzionale): Testo del titolo <h2> della sezione. Se assente, il titolo non viene renderizzato e lo spazio verticale aggiuntivo (rtds-space-y-6) non viene applicato.

Parametro logos

• logos (array, opzionale): Lista dei loghi da visualizzare
  • href (stringa): URL del link associato al logo
  • width (stringa): Larghezza dell’immagine in pixel (attributo HTML width)
  • height (stringa): Larghezza dell’immagine in pixel (attributo HTML height)
  • alt (stringa): Testo alternativo del logo per screen reader
  • size (stringa): Classi CSS per dimensionare il logo (es. 'rtds-h-12 md:rtds-h-16 md:rtds-flex-1')
  • path (stringa): Percorso dell’immagine (src)
  • srcset (stringa, opzionale): Attributo srcset per immagini retina/alta risoluzione

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.1.1 Contenuti non testuali — ogni logo deve avere alt descrittivo tramite il parametro del componente @logo
• 1.3.1 Informazioni e correlazioni — se presente, l’heading <h2> identifica la sezione dei loghi

Struttura e semantica

• Il componente è renderizzato come <div class="rtds-logos-area"> — wrapper presentazionale senza ruolo landmark
• Se presente, <h2> identifica la sezione con un titolo testuale (es. “Siti collegati”)
• I loghi sono link @logo con alt descrittivo del marchio rappresentato

Screen reader

• Il parametro alt di ogni logo nell’array logos deve descrivere il marchio (es. "Logo Regione Toscana")
• Se il logo è puramente decorativo e il nome dell’ente è già presente come testo visibile adiacente, alt="" è appropriato

Stili CSS

Classi Base

• .rtds-logos-area: Wrapper radice del componente — nessuno stile CSS dedicato nel file .css del componente; il layout è gestito con classi Tailwind inline nel template

Esempi di utilizzo

<!-- Area loghi con logo principale e loghi secondari -->
<div class="rtds-logos-area">
  <div class="rtds-container rtds-py-6 md:rtds-py-8 rtds-space-y-6">
    <h2 class="rtds-content-02 rtds-text-base md:rtds-text-lg rtds-font-bold">Siti collegati</h2>
    <div class="rtds-grid md:rtds-flex rtds-gap-4 md:rtds-items-center">
      <!-- Logo principale -->
      <div class="md:rtds-mr-auto">
        <!-- @logo principale -->
      </div>
      <!-- Loghi secondari -->
      <div class="rtds-flex rtds-flex-wrap rtds-gap-4 md:rtds-gap-6 rtds-items-center lg:rtds-gap-12">
        <!-- @logo per ogni elemento in logos -->
      </div>
    </div>
  </div>
</div>

<!-- Area loghi senza logo principale e senza titolo -->
<div class="rtds-logos-area">
  <div class="rtds-container rtds-py-6 md:rtds-py-8">
    <div class="rtds-grid md:rtds-flex rtds-gap-4 md:rtds-items-center">
      <div class="rtds-flex rtds-flex-wrap rtds-gap-4 md:rtds-gap-6 rtds-items-center lg:rtds-gap-12">
        <!-- @logo per ogni elemento in logos -->
      </div>
    </div>
  </div>
</div>

Note

• Il parametro mainLogo è confrontato come stringa (== 'true'), non come booleano: passare true (senza virgolette) nel config non attiva il logo principale
• Il componente non ha un file CSS dedicato; tutti gli stili sono classi Tailwind applicate inline nel template .njk
• Usato come sub-componente da @footer e @footer--regione