Regione Toscana Design System — Servizi Design System Core

Footer: Regione 

<footer class="rtds-footer rtds-border-t rtds-border-gray-01" id="siteFooter">

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

                <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" href="#">
                        <img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/toscana-notizie-mono.png" srcset="../../images/toscana-notizie-mono.png 1x, ../../images/toscana-notizie-mono@2x.png 2x" alt="Toscana Notizie" width="99" height="22" />
                    </a>

                    <a class="rtds-site-logo" href="#">
                        <img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/muoversi-in-toscana.png" alt="Muoversi in Toscana" width="111" height="24" />
                    </a>

                    <a class="rtds-site-logo" href="#">
                        <img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/toscana-accessibile.png" srcset="../../images/toscana-accessibile.png 1x, ../../images/toscana-accessibile@2x.png 2x" alt="Toscana Accessibile" width="142" height="22" />
                    </a>

                    <a class="rtds-site-logo" href="#">
                        <img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/giovanisi.png" srcset="../../images/giovanisi.png 1x, ../../images/giovanisi@2x.png 2x" alt="GiovaniSì" width="94" height="28" />
                    </a>

                    <a class="rtds-site-logo" href="#">
                        <img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/toscana-digitale.png" srcset="../../images/toscana-digitale.png 1x, ../../images/toscana-digitale@2x.png 2x" alt="Toscana Digitale" width="129" height="24" />
                    </a>

                </div>
            </div>
        </div>
    </div>

    <div class="rtds-footer__navigation-row rtds-container rtds-grid rtds-gap-x-10 rtds-gap-y-4 md:rtds-flex">

        <!-- Right block -->

        <div class="rtds-grid rtds-gap-6 md:rtds-gap-3 md:rtds-flex-1">
            <!-- Menu footer  -->
            <nav class="rtds-pb-4 -rtds-ml-4" aria-label="Contatti e utilità">
                <ul class="rtds-grid md:rtds-flex rtds-gap-y-3 md:rtds-gap-y-4 rtds-flex-wrap">

                    <li class="rtds-group md:rtds-border-r md:rtds-border-gray-01 md:last:rtds-border-r-0">
                        <a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-02 rtds-font-bold rtds-uppercase">UFFICI</a>
                    </li>

                    <li class="rtds-group md:rtds-border-r md:rtds-border-gray-01 md:last:rtds-border-r-0">
                        <a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-02 rtds-font-bold rtds-uppercase">URP</a>
                    </li>

                    <li class="rtds-group md:rtds-border-r md:rtds-border-gray-01 md:last:rtds-border-r-0">
                        <a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-02 rtds-font-bold rtds-uppercase">PEC</a>
                    </li>

                    <li class="rtds-group md:rtds-border-r md:rtds-border-gray-01 md:last:rtds-border-r-0">
                        <a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-02 rtds-font-bold rtds-uppercase">MAPPA DEL SITO</a>
                    </li>

                    <li class="rtds-group md:rtds-border-r md:rtds-border-gray-01 md:last:rtds-border-r-0">
                        <a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-02 rtds-font-bold rtds-uppercase">INTRANET</a>
                    </li>

                </ul>
            </nav>

        </div>

    </div>

    <div class="rtds-border-t rtds-border-gray-01">
        <div class="rtds-container">
            <!-- Menu footer  -->
            <nav class="-rtds-ml-4 rtds-py-4 md:rtds-py-6" aria-label="Altre informazioni">
                <ul class="rtds-grid md:rtds-flex rtds-gap-y-3 md:rtds-gap-y-4 rtds-flex-wrap">

                    <li class="rtds-group">
                        <a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-03 rtds-font-bold">Gestione cookies</a>
                    </li>

                    <li class="rtds-group">
                        <a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-03 rtds-font-bold">Note legali e copyright</a>
                    </li>

                    <li class="rtds-group">
                        <a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-03 rtds-font-bold">Privacy e cookie</a>
                    </li>

                    <li class="rtds-group">
                        <a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-03 rtds-font-bold">Dichiarazione di accessibilità</a>
                    </li>

                </ul>
            </nav>
        </div>
    </div>

    <!-- Footer bottom bar -->
    <div class="rtds-footer__bottom-bar">

        <div class="rtds-container rtds-grid rtds-gap-6 md:rtds-flex rtds-items-center rtds-justify-between">

            <div class="rtds-footer__bottom-bar-left">
                <!-- Utilities and other -->

                <div class="-rtds-ml-4 rtds-flex rtds-gap-y-3 rtds-gap-x-5 md:rtds-gap-y-1 rtds-flex-wrap rtds-content-01">

                    <small class="rtds-py-1 rtds-px-4 md:rtds-py-4 rtds-content-01 rtds-text-sm rtds-font-bold">Partita IVA 00000000000</small>

                </div>

            </div>

            <div class="rtds-footer__bottom-bar-right rtds-px-2 md:rtds-px-0">

                <!-- Logos -->
                <div class="rtds-site-logo rtds-w-40 rtds-h-auto md:rtds-w-44 lg:rtds-w-auto">
                    <img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/regione-toscana-logo-footer.png" srcset="../../images/regione-toscana-logo-footer.png 1x, ../../images/regione-toscana-logo-footer@2x.png 2x" alt="Regione Toscana" width="220" height="65" />
                </div>

            </div>

        </div>

    </div>

</footer>
 
{% extends '@footer' %}
{% block logosArea  %}
    {% if hasLogoArea %}
        {% render '@logos-area', { mainLogo: 'false', heading: 'Siti collegati', logos: logos }, true %}
    {% endif %}
{% endblock logosArea %}
     {% block bottomBarContentLeft %}
    <div class="rtds-footer__bottom-bar-left">
        <!-- Utilities and other -->
       
            <div class="-rtds-ml-4 rtds-flex rtds-gap-y-3 rtds-gap-x-5 md:rtds-gap-y-1 rtds-flex-wrap rtds-content-01">
                {% for bottomNavItem in bottomNavItems %}
                        <small class="rtds-py-1 rtds-px-4 md:rtds-py-4 rtds-content-01 rtds-text-sm rtds-font-bold">{{ bottomNavItem.label }}</small>
                {% endfor %}
            </div>

    </div>
    {% endblock bottomBarContentLeft %}


{% block bottomBarContentRightLogo %}
    <!-- Logos -->
    {% render '@logo', { size: 'rtds-w-40 rtds-h-auto md:rtds-w-44 lg:rtds-w-auto', width: '220', height: '65', alt: 'Regione Toscana', path: '/images/regione-toscana-logo-footer.png', srcset: '/images/regione-toscana-logo-footer.png 1x, /images/regione-toscana-logo-footer@2x.png 2x'}, true %}
{% endblock bottomBarContentRightLogo %}
 
{
  "borderClasses": "rtds-border-t rtds-border-gray-01",
  "navigationRow": "minimal",
  "hasBottomBar": true,
  "navItems": [
    {
      "label": "UFFICI"
    },
    {
      "label": "URP"
    },
    {
      "label": "PEC"
    },
    {
      "label": "MAPPA DEL SITO"
    },
    {
      "label": "INTRANET"
    }
  ],
  "navInfoItems": [
    {
      "label": "Gestione cookies"
    },
    {
      "label": "Note legali e copyright"
    },
    {
      "label": "Privacy e cookie"
    },
    {
      "label": "Dichiarazione di accessibilità"
    }
  ],
  "bottomNavItems": [
    {
      "label": "Partita IVA 00000000000"
    }
  ],
  "hasLogoArea": true,
  "hasInfoRow": true,
  "logos": [
    {
      "href": "#",
      "width": "99",
      "height": "22",
      "alt": "Toscana Notizie",
      "path": "/images/toscana-notizie-mono.png",
      "srcset": "/images/toscana-notizie-mono.png 1x, /images/toscana-notizie-mono@2x.png 2x"
    },
    {
      "href": "#",
      "width": "111",
      "height": "24",
      "alt": "Muoversi in Toscana",
      "path": "/images/muoversi-in-toscana.png"
    },
    {
      "href": "#",
      "width": "142",
      "height": "22",
      "alt": "Toscana Accessibile",
      "path": "/images/toscana-accessibile.png",
      "srcset": "/images/toscana-accessibile.png 1x, /images/toscana-accessibile@2x.png 2x"
    },
    {
      "href": "#",
      "width": "94",
      "height": "28",
      "alt": "GiovaniSì",
      "path": "/images/giovanisi.png",
      "srcset": "/images/giovanisi.png 1x, /images/giovanisi@2x.png 2x"
    },
    {
      "href": "#",
      "width": "129",
      "height": "24",
      "alt": "Toscana Digitale",
      "path": "/images/toscana-digitale.png",
      "srcset": "/images/toscana-digitale.png 1x, /images/toscana-digitale@2x.png 2x"
    }
  ]
}
  • Content: 
    /**
 * PRIMARY NAVIGATION
 *
*/
.rtds-footer {
    margin-top: auto;
        background-color: var(--color-background-02);
}
/*.rtds-footer__navigation-row {
        @apply ;
    }*/
.rtds-footer__bottom-bar {
    border-top-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        border-color: var(--color-border-gray-01);
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
}
@media (min-width: 768px) {
    .rtds-footer__bottom-bar {
        padding-top: var(--spacing-0);
        padding-bottom: var(--spacing-0);
    }
}
/*.rtds-footer__bottom-bar-right {
        @apply;
    }*/
  • URL: /components/raw/footer/footer.built.css
  • Filesystem Path: components/04-organisms/footer/footer.built.css
  • Size: 660 Bytes
  • Content: 
    /**
 * PRIMARY NAVIGATION
 *
*/
@layer components {
    .rtds-footer {
        @apply rtds-mt-auto rtds-background-02;
    }

    /*.rtds-footer__navigation-row {
        @apply ;
    }*/

    .rtds-footer__bottom-bar {
        @apply rtds-border-t rtds-border-gray-01 rtds-bg-white rtds-py-6 md:rtds-py-0;
    }

    /*.rtds-footer__bottom-bar-right {
        @apply;
    }*/
}
  • URL: /components/raw/footer/footer.css
  • Filesystem Path: components/04-organisms/footer/footer.css
  • Size: 378 Bytes

Componente Footer

Piè di pagina del sito, componente organismo composto da sezioni configurabili (area loghi, navigazione, riga informativa, barra inferiore). Estendibile tramite blocchi Nunjucks.

Comportamento

Il componente è renderizzato come <footer class="rtds-footer">. Le sezioni interne sono condizionali: vengono renderizzate solo se il parametro booleano corrispondente è true (es. hasLogoArea, hasInfoRow, hasBottomBar).

La riga di navigazione (navigationRow) supporta due layout:

  • 'extended': colonne multiple con heading e link (es. sitemap intranet)
  • 'minimal': singola riga di link in orizzontale

Varianti

Varianti di Layout

  • default: Footer con riga di navigazione minimale (navigationRow: minimal), area loghi, riga informativa e barra inferiore
  • regione: Variante specifica Regione Toscana — estende @footer con logos area (“Siti collegati”), bottom bar personalizzata con testo normativo e logo istituzionale

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

  • bgColor (stringa, opzionale): Classe CSS per il colore di sfondo del <footer> (es. 'rtds-bg-gray-50'); se assente viene usato il colore di default dalla classe .rtds-footer
  • borderClasses (stringa, opzionale): Classi CSS aggiuntive per il bordo superiore del footer (es. 'rtds-border-t rtds-border-gray-01')
  • navigationRow (stringa, opzionale): Layout della riga di navigazione — 'extended' per navigazione multi-colonna, 'minimal' per riga orizzontale
  • hasLogoArea (booleano, opzionale): Se true, renderizza il componente @logos-area nel blocco logosArea
  • hasInfoRow (booleano, opzionale): Se true, renderizza la riga informativa con i link navInfoItems
  • hasBottomBar (booleano, opzionale): Se true, renderizza la barra inferiore con link legali e logo

Parametri Menu

  • navItems (array, opzionale): Voci del menu orizzontale nella variante minimal
    • label (stringa): Etichetta della voce
  • navInfoItems (array, opzionale): Voci della riga informativa (hasInfoRow: true)
    • label (stringa): Etichetta della voce
  • bottomNavItems (array, opzionale): Voci della barra inferiore (hasBottomBar: true)
    • label (stringa): Etichetta della voce

Parametro logos (variante regione)

  • logos (array, opzionale): Lista di loghi da passare al componente @logos-area nella variante regione
    • href (stringa): URL del link associato al logo
    • width (stringa): Larghezza dell’immagine in pixel (attributo HTML width)
    • height (stringa): Altezza dell’immagine in pixel (attributo HTML height)
    • alt (stringa): Testo alternativo del logo per screen reader
    • 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.3.1 Informazioni e correlazioni — struttura semantica con <footer>, <nav> con aria-label per ogni navigazione
  • 2.4.1 Salto di blocchi — il <footer> è un landmark accessibile ai lettori di schermo senza necessità di skip link
  • 1.1.1 Contenuti non testuali — i loghi devono avere alt descrittivo

Struttura e semantica

  • Il componente è renderizzato come <footer class="rtds-footer"> — landmark contentinfo riconosciuto dagli screen reader
  • Ogni <nav> interno ha aria-label che ne descrive lo scopo (es. "Contatti e utilità", "Altre informazioni", "Informazioni legali, privacy e cookie")
  • La variante extended include <h2 class="rtds-sr-only"> per etichettare la sezione di navigazione principale
  • Ogni colonna di navigazione dell’extended usa <nav aria-labelledby="footerMainNav"> con <h3> come etichetta

Attributi ARIA

Attributo Valori Condizione
aria-label sui <nav> stringa descrittiva sempre presente su ogni navigazione
aria-labelledby su <nav> (variante extended) ID del <h3> di colonna quando la navigazione è suddivisa in colonne con heading

Screen reader

  • Il <footer> viene annunciato come landmark “contentinfo” dai lettori di schermo
  • Ogni navigazione viene annunciata con la propria aria-label prima dell’elenco dei link
  • I loghi nella bottom bar devono avere alt descrittivo tramite il parametro del componente @logo

Stili CSS

Classi Base

  • .rtds-footer: Elemento radice <footer> — margin-top: auto, colore di sfondo dal token --color-background-02

Classi Elementi (BEM)

  • .rtds-footer__navigation-row: Riga di navigazione principale — layout grid/flex responsive con gap
  • .rtds-footer__bottom-bar: Barra inferiore — bordo superiore, sfondo bianco, padding verticale responsive
  • .rtds-footer__bottom-bar-left: Sezione sinistra della barra inferiore (link legali/normativi)
  • .rtds-footer__bottom-bar-right: Sezione destra della barra inferiore (logo istituzionale)