Regione Toscana Design System

Footer: Regione 

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

    <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
 *
*/
@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

Descrizione

Il componente Footer è un organismo che rappresenta il piè di pagina di un sito web. È composto da diverse sezioni configurabili che possono essere attivate o disattivate in base alle esigenze.

Comportamento

Il footer è un componente flessibile che può essere configurato in diverse varianti. Supporta:

  • Area loghi
  • Riga di navigazione principale
  • Riga informativa
  • Barra inferiore

Stili

Il componente utilizza classi Tailwind CSS personalizzate con il prefisso rtds-. Gli stili principali includono:

  • Background color personalizzabile
  • Bordi configurabili
  • Layout responsive con grid e flex
  • Spaziature e padding adattivi

Configurazioni per lo Sviluppo in Nunjucks

Parametri Disponibili

Il componente espone i seguenti blocchi per la personalizzazione:

  • logosArea: Area per i loghi
  • navigationRow: Riga di navigazione principale
  • navigationRowContent: Contenuto della riga di navigazione
  • infoRow: Riga informativa
  • bottomBar: Barra inferiore
  • bottomBarContentClasses: Classi per la barra inferiore
  • bottomBarContentLeft: Contenuto sinistro della barra inferiore
  • bottomBarContentCenter: Contenuto centrale della barra inferiore
  • bottomBarContentRight: Contenuto destro della barra inferiore
  • bottomBarContentRightLogo: Logo nella barra inferiore destra

Parametri principali

  • bgColor: Personalizzazione del colore di sfondo del footer
  • borderClasses: Classi per la personalizzazione dei bordi
  • navigationRow: Configurazione della riga di navigazione (‘extended’ o ‘minimal’)
  • hasLogoArea: Booleano per attivare/disattivare l’area loghi
  • hasInfoRow: Booleano per attivare/disattivare la riga informativa
  • hasBottomBar: Booleano per attivare/disattivare la barra inferiore
  • navItems: Array di elementi per il menu principale del footer
    • label: Etichetta dell’elemento
  • navInfoItems: Array di elementi per il menu informativo
    • label: Etichetta dell’elemento
  • bottomNavItems: Array di elementi per il menu della barra inferiore
    • label: Etichetta dell’elemento

Varianti

Il componente supporta due varianti predefinite:

  1. default: Configurazione base con riga di navigazione minima
  2. regione: Variante specifica per la Regione Toscana con configurazione personalizzata

Loghi

Nella variante regione, è possibile configurare un array di loghi con:

  • href: Link associato al logo
  • width: Larghezza del logo
  • height: Altezza del logo
  • alt: Testo alternativo
  • path: Percorso dell’immagine
  • srcset: Set di immagini per display ad alta risoluzione