Net7 design system

Footer 

<footer class="n7-footer mt-auto bg-white border-t n7-border-brand-dark">
    <div class="n7-footer__navigation-row grid gap-4 md:flex xl:container md:px-5 py-6">
        <!-- Left block  -->
        <div class="grid gap-3 px-5 md:px-0 pb-4 md:pb-0 border-b md:border-b-0 n7-border-gray-01">
            <!-- Logo -->
            <div class="n7-site-logo site-logo flex mb-1 w-48 h-12 md:w-64 md:h-20">
                <img class="w-full h-full object-contain object-left-top" src="/images/logo-footer.png" alt="Artea - Agenzia regionale per le erogazioni in agricoltura" width="247" height="80" />
            </div>

            <!-- Info e contatti -->
            <address class="grid gap-3 n7-content-03 text-sm">
                <p>Via Ruggero Bardazzi 19/2150127 - Firenze</p>
                <p>Email: <a class="n7-link n7-link--sm n7-link--underline text-current" href="mailto:email@email.com">email@email.com</a></p>
                <p>Pec: <a class="n7-link n7-link--sm n7-link--underline text-current" href="mailto:email@email.com">email@email.com</a></p>
                <p>Codice fiscale: 05096020481</p>
            </address>
        </div>

        <!-- Right block -->
        <div class="grid gap-6 md:gap-3 md:justify-end md:flex-1">
            <!-- Menu footer  -->
            <nav class="pb-4 border-b md:border-b-0 n7-border-gray-01" aria-label="Contatti e segnalazioni">
                <ul class="flex gap-y-3 md:gap-y-4 flex-wrap">

                    <li class="group md:border-r n7-border-gray-01 md:last:border-r-0">
                        <a href="" class="n7-link px-4 md:px-6 md:py-2 group:last:md:pr-0 text-sm md:text-md lg:text-lg n7-content-03">Contatti</a>
                    </li>

                    <li class="group md:border-r n7-border-gray-01 md:last:border-r-0">
                        <a href="" class="n7-link px-4 md:px-6 md:py-2 group:last:md:pr-0 text-sm md:text-md lg:text-lg n7-content-03">Amministrazione</a>
                    </li>

                    <li class="group md:border-r n7-border-gray-01 md:last:border-r-0">
                        <a href="" class="n7-link px-4 md:px-6 md:py-2 group:last:md:pr-0 text-sm md:text-md lg:text-lg n7-content-03">Segnala illeciti o irregolarità</a>
                    </li>

                </ul>
            </nav>

            <div class="md:text-right self-end grid gap-3 px-5 md:px-0">
                <p class="text-sm font-bold">ARTEA partecipa agli open data di Regione Toscana</p>
                <a href="" class="n7-link n7-link--sm text-sm md:justify-end">https://opentoscana.com <svg class="inline-block align-middle fill-current w-4 h-4 ml-1" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#mini--arrow-right-on-rectangle" />
                    </svg>
                </a>
            </div>
        </div>
    </div>

    <!-- Footer bottom bar -->
    <div class="n7-footer__bottom-bar border-t n7-border-gray-01 px-2 md:px-5 py-6">
        <div class="xl:container grid gap-6 md:flex items-center">
            <!-- Utilities and other -->
            <nav aria-label="Utilità">
                <ul class="flex gap-y-3 gap-x-5 md:gap-y-1 flex-wrap">

                    <li>
                        <a href="" class="n7-link py-1 px-3 md:py-4 n7-content-03 text-xs md:text-sm md:text-md">Gestione cookies</a>
                    </li>

                    <li>
                        <a href="" class="n7-link py-1 px-3 md:py-4 n7-content-03 text-xs md:text-sm md:text-md">Note legali e copyright</a>
                    </li>

                    <li>
                        <a href="" class="n7-link py-1 px-3 md:py-4 n7-content-03 text-xs md:text-sm md:text-md">Privacy e cookie</a>
                    </li>

                    <li>
                        <a href="" class="n7-link py-1 px-3 md:py-4 n7-content-03 text-xs md:text-sm md:text-md">Dichiarazione di accessibilità</a>
                    </li>

                </ul>
            </nav>

            <!-- Logos -->
            <div class="pl-0 md:ml-auto px-2 md:px-0">
                <div class="n7-site-logo site-logo flex w-40 h-auto md:w-44 lg:w-[223px]">
                    <img class="w-full h-full object-contain object-left-top" src="/images/regione-toscana-footer.png" alt="Regione Toscana" width="223" height="76" />
                </div>

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

</footer>
 
<footer class="n7-footer mt-auto bg-white{% if borderClasses %} {{ borderClasses }}{% endif %}">
    <div class="n7-footer__navigation-row grid gap-4 md:flex xl:container md:px-5 py-6">
        <!-- Left block  -->
        <div class="grid gap-3 px-5 md:px-0 pb-4 md:pb-0 border-b md:border-b-0 n7-border-gray-01">
            <!-- Logo -->
            {% render '@logo',{ classes:'mb-1', path:'/images/logo-footer.png', width: '247', height: '80', alt: 'Artea - Agenzia regionale per le erogazioni in agricoltura'}, true %}
            
            <!-- Info e contatti -->
            <address class="grid gap-3 n7-content-03 text-sm">
                <p>Via Ruggero Bardazzi 19/2150127 - Firenze</p>
                <p>Email: <a class="n7-link n7-link--sm n7-link--underline text-current" href="mailto:email@email.com">email@email.com</a></p>
                <p>Pec: <a class="n7-link n7-link--sm n7-link--underline text-current" href="mailto:email@email.com">email@email.com</a></p>
                <p>Codice fiscale: 05096020481</p>
            </address>
        </div>

        <!-- Right block -->
        <div class="grid gap-6 md:gap-3 md:justify-end md:flex-1">
            <!-- Menu footer  -->
            <nav class="pb-4 border-b md:border-b-0 n7-border-gray-01" aria-label="Contatti e segnalazioni">
                <ul class="flex gap-y-3 md:gap-y-4 flex-wrap">
                    {% for navItem in navItems %}
                    <li class="group md:border-r n7-border-gray-01 md:last:border-r-0">
                        <a href="" class="n7-link px-4 md:px-6 md:py-2 group:last:md:pr-0 text-sm md:text-md lg:text-lg n7-content-03">{{ navItem.label }}</a>
                    </li>
                    {% endfor %}
                </ul>
            </nav>

            <div class="md:text-right self-end grid gap-3 px-5 md:px-0">
                <p class="text-sm font-bold">ARTEA partecipa agli open data di Regione Toscana</p>
                <a href="" class="n7-link n7-link--sm text-sm md:justify-end">https://opentoscana.com {% render '@icon',{ id: 'mini--arrow-right-on-rectangle', size: 'w-4 h-4', classes: 'ml-1' }, true %}</a>
            </div>
        </div>
    </div>

    <!-- Footer bottom bar -->
    <div class="n7-footer__bottom-bar border-t n7-border-gray-01 px-2 md:px-5 py-6">
        <div class="xl:container grid gap-6 md:flex items-center">
            <!-- Utilities and other -->
            <nav aria-label="Utilità">
                <ul class="flex gap-y-3 gap-x-5 md:gap-y-1 flex-wrap">
                    {% for bottomNavItem in bottomNavItems %}
                        <li>
                            <a href="" class="n7-link py-1 px-3 md:py-4 n7-content-03 text-xs md:text-sm md:text-md">{{ bottomNavItem.label }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </nav>

            <!-- Logos -->
            <div class="pl-0 md:ml-auto px-2 md:px-0">
                {% render '@logo',{ path:'/images/regione-toscana-footer.png', size: 'w-40 h-auto md:w-44 lg:w-[223px]', width: '223', height: '76', alt: 'Regione Toscana'}, true %}
            </div>
        </div>
    </div>

</footer>
 
{
  "borderClasses": "border-t n7-border-brand-dark",
  "navItems": [
    {
      "label": "Contatti"
    },
    {
      "label": "Amministrazione"
    },
    {
      "label": "Segnala illeciti o irregolarità"
    }
  ],
  "bottomNavItems": [
    {
      "label": "Gestione cookies"
    },
    {
      "label": "Note legali e copyright"
    },
    {
      "label": "Privacy e cookie"
    },
    {
      "label": "Dichiarazione di accessibilità"
    }
  ]
}

No notes defined.