Net7 UI Kit

Footer 

<footer class="n7-footer mt-auto bg-white">

    <div class="n7-logos-area">
        <div class="container p-6 space-y-6">

            <h2 class="n7-content-02 text-base md:text-lg font-bold">Titolo sezione footer</h2>

            <div class="grid md:flex gap-4 md:items-center">

                <div class="md:mr-auto">
                    <!-- Logo -->
                    <a class="n7-site-logo site-logo flex" href="#">
                        <img class="w-full h-full object-contain object-left-top" src="/images/logo.png" alt="Img alt" width="247" height="80" />
                    </a>
                </div>

                <div class="flex flex-wrap gap-4">

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

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

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

    <div class="n7-footer__navigation-row grid gap-x-10 gap-y-4 md:flex n7-container md:px-5 py-6">

        <!-- Left block  -->
        <div class="flex flex-col 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">
                <img class="w-full h-full object-contain object-left-top" src="/images/logo.png" alt="Img alt" width="247" height="80" />
            </div>

            <!-- Info e contatti -->
            <address class="grid gap-3 n7-content-03 text-sm">
                <p>Indirizzo</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: 00000000000</p>
            </address>
        </div>

        <!-- Right block -->

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-x-14 gap-y-4 w-full px-5">
            <div class="basis-full md:basis-1/2 lg:basis-full">
                <nav aria-labelledby="footerMainNav01">
                    <h2 id="footerMainNav01" class="text-lg mb-4">Lorem ipsum</h2>
                    <ul class="flex flex-col gap-3">
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">Lorem ipsum dolor sit amet consectetur adipiscing elit</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                    </ul>
                    <nav>
            </div>
            <div class="basis-full md:basis-1/2 lg:basis-full">
                <nav aria-labelledby="footerMainNav02">
                    <h2 id="footerMainNav02" class="text-lg mb-4">Lorem ipsum</h2>
                    <ul class="flex flex-col gap-3">
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">Lorem ipsum dolor sit amet consectetur adipiscing elit</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                    </ul>
                    <nav>
            </div>
            <div class="basis-full md:basis-1/2 lg:basis-full">
                <nav aria-labelledby="footerMainNav03">
                    <h2 id="footerMainNav03" class="text-lg mb-4">Lorem ipsum</h2>
                    <ul class="flex flex-col gap-3">
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">Lorem ipsum dolor sit amet consectetur adipiscing elit</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                    </ul>
                    <nav>
            </div>
            <div class="basis-full md:basis-1/2 lg:basis-full">
                <div class="flex flex-col gap-8">
                    <h2 class="text-lg">Titolo</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit proin bibendum ut purus vitae pharetra.</p>
                    <a href="#" class="n7-btn 
    n7-btn--primary
    ">

                        Link

                    </a>

                </div>
            </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="n7-container grid gap-6 md:flex items-center justify-between">

            <div class="n7-footer__bottom-bar-left">
                <!-- 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>
            </div>

            <div class="n7-footer__bottom-bar-right px-2 md:px-0">
                <!-- Logos -->
                <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/logo.png" alt="Img alt" width="223" height="76" />
                </div>
            </div>

        </div>

    </div>

</footer>
 
<footer class="n7-footer mt-auto{% if bgColor %} {{ bgColor }}{% endif %}{% if borderClasses %} {{ borderClasses }}{% endif %}{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
    {% block logosArea  %}
        {% if hasLogoArea %}
            {% render '@logos-area', { mainLogo: 'true', heading: 'Titolo sezione footer', logos: logos }, true %}
        {% endif %}
    {% endblock logosArea %}

    {% block navigationRow %}

    <div class="n7-footer__navigation-row grid gap-x-10 gap-y-4 md:flex n7-container md:px-5 py-6">
        {% block navigationRowContent %}
        <!-- Left block  -->
        <div class="flex flex-col 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', width: '247', height: '80', alt: 'Img alt'}, true %}
            
            <!-- Info e contatti -->
            <address class="grid gap-3 n7-content-03 text-sm">
                <p>Indirizzo</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: 00000000000</p>
            </address>
        </div>

        <!-- Right block -->
        {% if navigationRow == 'extended' %}
        {# Three columns - To be implemented dynamic number of columns #}
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-x-14 gap-y-4 w-full px-5">
            <div class="basis-full md:basis-1/2 lg:basis-full">
                <nav aria-labelledby="footerMainNav01">
                    <h2 id="footerMainNav01" class="text-lg mb-4">Lorem ipsum</h2>
                    <ul class="flex flex-col gap-3">
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">Lorem ipsum dolor sit amet consectetur adipiscing elit</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                    </ul>
                <nav>
            </div>
            <div class="basis-full md:basis-1/2 lg:basis-full">
                <nav aria-labelledby="footerMainNav02">
                    <h2 id="footerMainNav02" class="text-lg mb-4">Lorem ipsum</h2>
                    <ul class="flex flex-col gap-3">
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">Lorem ipsum dolor sit amet consectetur adipiscing elit</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                    </ul>
                <nav>
            </div>
            <div class="basis-full md:basis-1/2 lg:basis-full">
                <nav aria-labelledby="footerMainNav03">
                    <h2 id="footerMainNav03" class="text-lg mb-4">Lorem ipsum</h2>
                    <ul class="flex flex-col gap-3">
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">Lorem ipsum dolor sit amet consectetur adipiscing elit</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                    </ul>
                <nav>
            </div>
            <div class="basis-full md:basis-1/2 lg:basis-full">
                <div class="flex flex-col gap-8">
                    <h2 class="text-lg">Titolo</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit proin bibendum ut purus vitae pharetra.</p>
                    {% render '@button', {label:'Link', href: '#' }, true %}
                </div>
            </div>
        </div>
        {% endif %}

        {% if navigationRow == 'minimal' %}
        <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">Lorem ipsum dolor sit amet</p>
                <a href="" class="n7-link n7-link--sm text-sm md:justify-end">link.com {% render '@icon',{ id: 'mini--arrow-right-on-rectangle', size: 'w-4 h-4', classes: 'ml-1' }, true %}</a>
            </div>
        </div>
        {% endif %}
        {% endblock navigationRowContent %}
    </div>
    {% endblock navigationRow %}
    <!-- Footer bottom bar -->
    {% block bottomBar %}
        {% if hasBottomBar %}
            <div class="n7-footer__bottom-bar border-t n7-border-gray-01 px-2 md:px-5 py-6">
            
                <div class="{% block bottomBarContentClasses %}n7-container grid gap-6 md:flex items-center justify-between{% endblock bottomBarContentClasses %}">
                    
                    {% block bottomBarContentLeft %}
                    
                    <div class="n7-footer__bottom-bar-left">
                        <!-- 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>
                    </div>
                    {% endblock bottomBarContentLeft %}

                    {% block bottomBarContentCenter %}

                    {% endblock bottomBarContentCenter %}

                    {% block bottomBarContentRight %}
                    <div class="n7-footer__bottom-bar-right px-2 md:px-0">
                        <!-- Logos -->
                        {% render '@logo',{ size: 'w-40 h-auto md:w-44 lg:w-[223px]', width: '223', height: '76', alt: 'Img alt'}, true %}
                    </div>
                    {% endblock bottomBarContentRight %}

                </div>
  
            </div>
        {% endif %}
    {% endblock bottomBar %}
</footer>
 
{
  "navigationRow": "extended",
  "hasBottomBar": true,
  "bgColor": "bg-white",
  "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à"
    }
  ]
}

Footer component Configurations:

  • classes: value - when you need extra classes - for style overriding etc
  • bgColor: value - eventual customization for footer background
  • borderClasses: value - border customization classes if needed
  • navigationRow: value (extended or minimal) - configuration for column management
  • hasLogoArea: boolean - configuration for logos area
  • navItems: (footer menu)
    • label: value - navItems label
  • bottomNavItems: (bottom bar footer menu)
    • label: value - bottomNavItems label
  • logos: (for logos area) array of logos objects, see logo component for more details on configurations
    • alt: value - logo alt
    • width: value - logo width
    • height: value - logo height
    • href: value - logo href
    • classes: value - logo classes
    • srcset: value - logo srcset
    • objectFit: value - logo object-fit
    • path: value - logo path

Blocks:

  • logosArea: manage logos area
  • navigationRow
  • navigationRowContent: manage content for Navigation Row block
  • bottomBar
  • bottomBarContentClasses: for bottom ar classes overriding in template if needed
  • bottomBarContentLeft
  • bottomBarContentCenter
  • bottomBarContentRight
  • classes: for class overridings in variant templates, if needed