Regione Toscana Design System

Logos area 

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

                <a class="rtds-site-logo rtds-h-12 md:rtds-h-16 md:rtds-flex-1" href="#">
                    <img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="/images/logo.png" alt="Img alt" width="247" height="80" />
                </a>

                <a class="rtds-site-logo rtds-h-12 md:rtds-h-16 md:rtds-flex-1" href="#">
                    <img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="/images/logo.png" alt="Img alt" width="247" height="80" />
                </a>

            </div>
        </div>
    </div>
</div>
 
<div class="rtds-logos-area">
    <div class="rtds-container rtds-py-6 md:rtds-py-8{% if heading %} rtds-space-y-6{% endif %}">
    {% if heading %}
     <h2 class="rtds-content-02 rtds-text-base md:rtds-text-lg rtds-font-bold">{{ heading }}</h2>
    {% endif %}
    <div class="rtds-grid md:rtds-flex rtds-gap-4 md:rtds-items-center">
        {% if mainLogo == 'true' %}
        <div class="md:rtds-mr-auto">
            <!-- Logo -->
            {% render '@logo', { href:'#', width: '247', height: '80', alt: 'Img alt', size:''}, true %}
        </div>
        {% endif %}
        <div class="rtds-flex rtds-flex-wrap rtds-gap-4 md:rtds-gap-6 rtds-items-center lg:rtds-gap-12">
            {% for logo in logos %}
            {% render '@logo', { href: logo.href, width: logo.width, height: logo.height, alt: logo.alt, size: logo.size, path: logo.path, srcset: logo.srcset}, true %}
            {% endfor %}
        </div>
    </div>
</div>
</div>
 
{
  "mainLogo": true,
  "logos": [
    {
      "href": "#",
      "width": "247",
      "height": "80",
      "alt": "Img alt",
      "size": "rtds-h-12 md:rtds-h-16 md:rtds-flex-1",
      "path": "/images/logo.png"
    },
    {
      "href": "#",
      "width": "247",
      "height": "80",
      "alt": "Img alt",
      "size": "rtds-h-12 md:rtds-h-16 md:rtds-flex-1",
      "path": "/images/logo.png"
    }
  ]
}

Area Loghi

Componente per la visualizzazione di un’area contenente loghi nel footer, con supporto per un logo principale e una lista di loghi secondari.

Comportamento e Funzionalità

Il componente Logos Area è progettato per gestire la visualizzazione di loghi in modo flessibile e responsive. Include:

  • Supporto per un logo principale posizionato a sinistra
  • Lista di loghi secondari con layout responsive
  • Gestione di titoli opzionali per la sezione
  • Supporto per immagini responsive con srcset
  • Personalizzazione delle dimensioni dei loghi

Accessibilità

Il componente è stato progettato seguendo le best practice di accessibilità WCAG 2.1:

  • Tutti i loghi includono attributi alt per la descrizione testuale
  • La struttura è semanticamente corretta
  • I loghi sono collegati tramite link accessibili

Configurazioni per lo Sviluppo in Nunjucks

Parametri Disponibili

Struttura e Layout

  • heading: Testo del titolo della sezione (opzionale)
  • mainLogo: Booleano che determina se mostrare un logo principale distinto (default: true)

Loghi

  • logos: Array di oggetti contenenti i loghi secondari
    • href: URL del link associato al logo
    • width: Larghezza del logo
    • height: Altezza del logo
    • alt: Testo alternativo per l’accessibilità
    • size: Classi CSS per la dimensione del logo
    • path: Percorso dell’immagine del logo
    • srcset: Attributo srcset per immagini responsive

Varianti

Il componente include diverse possibilità di personalizzazione:

  1. Default: Area loghi con logo principale e lista di loghi secondari
  2. Senza Logo Principale: Area loghi con solo lista di loghi secondari
  3. Con Titolo: Area loghi con titolo della sezione
  4. Responsive: Layout che si adatta a diverse dimensioni dello schermo

Ogni variante mantiene la coerenza con il design system e può essere ulteriormente personalizzata secondo le esigenze specifiche.