Net7 UI Kit

Footer: Variant 03 

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

        <div class="n7-container grid gap-6 justify-center">
            <!-- Logo -->
            <div class="grid lg:flex justify-center gap-6 lg:gap-8 px-2 md:px-5">
                <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>
                <p class="n7-site-slogan lg:w-4/12">Site slogan Lorem ipsum dolor sit amet, consectetur adipiscing elit proin bibendum ut purus vitae pharetra.</p>
            </div>
            <div>
                <nav aria-label="Utilità">
                    <ul class="grid md:flex gap-y-3 gap-x-5 md:gap-y-1 flex-wrap md:justify-center">

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

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

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

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

                    </ul>
                </nav>
            </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 md:justify-between">

            <div class="n7-footer__bottom-bar-left grid lg:flex gap-6 lg:gap-12">

                <a href="" class="flex items-center hover:underline gap-2">
                    <svg class="n7-icon inline-block align-middle fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#mini--phone" />
                    </svg>

                    <span>
                        Link text
                    </span>
                </a>

                <div class="n7-social-links grid gap-1 md:flex md:gap-6 items-center">
                    <h2 id="socialLabelId">Scrivici</h2>

                    <ul id="footerSocialContacts" class="flex items-center gap-4 p-2 lg:p-0" aria-labelledby="socialLabelId">

                        <li class="flex items-center">
                            <a href="" class="n7-link
     text-2xl n7-content-01 p-2 xl:p-1 n7-link--lg
">
                                <span class="sr-only">Invia un&#39;Email</span>

                                <svg class="n7-icon inline-block align-middle fill-current w-8 h-8 lg:w-6 lg:h-6" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#solid--envelope-open" />
                                </svg>

                            </a>
                        </li>

                        <li class="flex items-center">
                            <a href="" class="n7-link
     text-2xl n7-content-01 p-2 xl:p-1 n7-link--lg
">
                                <span class="sr-only">Messenger</span>

                                <svg class="n7-icon inline-block align-middle fill-current w-8 h-8 lg:w-6 lg:h-6" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#solid--chat-bubble-oval-left-ellipsis" />
                                </svg>

                            </a>
                        </li>

                    </ul>

                </div>

            </div>

            <div class="n7-footer__bottom-bar-center flex">
                <a href="#" class="n7-btn 
    n7-btn--secondary w-full md:w-auto">

                    newsletter

                </a>

            </div>

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

                <div class="n7-social-links grid gap-1 md:flex md:gap-6">

                    <ul id="footerSocial" class="flex items-center gap-4 p-2 lg:p-0">

                        <li class="flex items-center">
                            <a href="" class="n7-link
     text-2xl n7-content-01 p-2 xl:p-1 n7-link--lg
">
                                <span class="sr-only">Vai al profilo Facebook di ???</span>

                                <svg class="n7-icon inline-block align-middle fill-current w-8 h-8 lg:w-6 lg:h-6" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#solid--facebook" />
                                </svg>

                            </a>
                        </li>

                        <li class="flex items-center">
                            <a href="" class="n7-link
     text-2xl n7-content-01 p-2 xl:p-1 n7-link--lg
">
                                <span class="sr-only">Vai al profilo Instagram di ???</span>

                                <svg class="n7-icon inline-block align-middle fill-current w-8 h-8 lg:w-6 lg:h-6" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#solid--instagram" />
                                </svg>

                            </a>
                        </li>

                        <li class="flex items-center">
                            <a href="" class="n7-link
     text-2xl n7-content-01 p-2 xl:p-1 n7-link--lg
">
                                <span class="sr-only">Vai al canale YouTube di ???</span>

                                <svg class="n7-icon inline-block align-middle fill-current w-8 h-8 lg:w-6 lg:h-6" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#solid--youtube" />
                                </svg>

                            </a>
                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

</footer>
 
{% extends '@footer' %}
 {% block navigationRowContent %}
  <div class="n7-container grid gap-6 justify-center">
        <!-- Logo -->
        <div class="grid lg:flex justify-center gap-6 lg:gap-8 px-2 md:px-5">
            {% render '@logo',{ classes:'mb-1', width: '247', height: '80', alt: 'Img alt'}, true %}
            <p class="n7-site-slogan lg:w-4/12">Site slogan Lorem ipsum dolor sit amet, consectetur adipiscing elit proin bibendum ut purus vitae pharetra.</p>
        </div>
        <div>
            <nav aria-label="Utilità">
                <ul class="grid md:flex gap-y-3 gap-x-5 md:gap-y-1 flex-wrap md:justify-center">
                    {% for bottomNavItem in bottomNavItems %}
                        <li>
                            <a href="" class="n7-link py-1 px-3 md:py-4 n7-content-03">{{ bottomNavItem.label }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </nav>
        </div>
    </div>
 {% endblock navigationRowContent %}
 {% block bottomBarContentClasses %}n7-container grid gap-6 md:flex items-center md:justify-between{% endblock bottomBarContentClasses %}

    {% block bottomBarContentLeft %}
    <div class="n7-footer__bottom-bar-left grid lg:flex gap-6 lg:gap-12">
        {# {% render '@link', { label: 'Link vario' }, true %} #}
        <a href="" class="flex items-center hover:underline gap-2">
            {% render '@icon', {id:'mini--phone', size:'w-6 h-6'}, true %}
            <span>
                Link text
            </span>
        </a>
        
        {% render '@social-links',{wrapperClasses: 'grid gap-1 md:flex md:gap-6 items-center',label: 'Scrivici',id: 'footerSocialContacts', classes: 'p-2 lg:p-0',itemClasses:'flex items-center', items: [{label : 'Invia un\'Email', icon: 'solid--envelope-open'}, {label : 'Messenger', icon: 'solid--chat-bubble-oval-left-ellipsis'}] }, true %}
    </div>
    {% endblock bottomBarContentLeft %}

    {% block bottomBarContentCenter %}
        <div class="n7-footer__bottom-bar-center flex">
            {% render '@button--secondary',{ label: 'newsletter', href:'#', classes: 'w-full md:w-auto' }, true%}
        </div>
    {% endblock bottomBarContentCenter %}

    {% block bottomBarContentRight %}
    <div class="n7-footer__bottom-bar-right px-2 md:px-0">
      {% render '@social-links',{id: 'footerSocial', classes: 'p-2 lg:p-0',itemClasses:'flex items-center', items: [{label : 'Vai al profilo Facebook di ???', icon: 'solid--facebook'}, {label : 'Vai al profilo Instagram di ???', icon: 'solid--instagram'}, {label : 'Vai al canale YouTube di ???', icon: 'solid--youtube'}] }, true %}
    </div>
    {% endblock bottomBarContentRight %}
 
{
  "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à"
    }
  ],
  "hasLogoArea": true
}

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