Global Footer

Ready

HTML
View
Context
Info
Notes


        
        <footer class="text-white bg-bravo relative z-50 grid grid-rows-1 grid-cols-1 flex-shrink-0 flex-grow-0 pt-12 sm:pt-20 xl:pt-28">
    <div class="absolute top-0 left-0 w-full h-12 sm:h-20 xl:h-28">
        <svg class="absolute top-0 left-0 w-full h-auto" xmlns="http://www.w3.org/2000/svg" width="1920" height="108" viewBox="0 0 1920 108" fill="none">
            <path d="M8.91763e-10 0H1920V14.3943L0 108L8.91763e-10 0Z" fill="white" />
        </svg>
    </div>
    <div class="footer container md:grid md:grid-cols-12 md:auto-rows-auto pt-2 lg:pt-10 pb-6 lg:pb-16 h-full gap-x-6 relative z-10">
        <div class="mb-9 row-start-1 row-end-2 col-start-1 col-end-12">
            <div>
                <a href="./index.html" class="flex items-center lg:block w-64 lg:w-auto">
                    <img src="/front-end/images/logo.svg" alt="Gigaclear" width="260" height="50" />
                </a>
            </div>
        </div>
        <div class="mb-6 row-start-2 row-end-3 md:col-start-1 md:col-end-7 lg:col-start-1 lg:col-end-4">
            <p class="font-bold pb-4 text-xl lg:text-2xl">Home</p>
            <ul class="">

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./about-us.html">Smart WiFi</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Home Phone</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Careers</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Support</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">About us</a>
                </li>

            </ul>
        </div>
        <div class="mb-6 row-start-2 row-end-3 md:col-start-7 md:col-end-13 lg:col-start-4 lg:col-end-7">
            <p class="font-bold pb-4 text-xl lg:text-2xl">Business</p>
            <ul class="">

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./about-us.html">Smart WiFi</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Home Phone</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Careers</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Support</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">About us</a>
                </li>

            </ul>
        </div>
        <div class="mb-6 row-start-3 row-end-4 lg:row-start-2 lg:row-end-3 md:col-start-1 md:col-end-7 lg:col-start-7 lg:col-end-10">
            <p class="font-bold pb-4 text-xl lg:text-2xl">My Account</p>
            <ul class="">

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./about-us.html">My Gigaclear</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Network Status</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Refer a Friend</a>
                </li>

            </ul>
        </div>
        <div class="mb-6 row-start-3 row-end-4 lg:row-start-2 lg:row-end-3 md:col-start-7 md:col-end-13 lg:col-start-10 lg:col-end-13">
            <p class="font-bold pb-4 text-xl lg:text-2xl">Legal</p>
            <ul class="">

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./terms-and-conditions.html">Legal</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Privacy Policy</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Modern Slavery Statement</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./about-us.html">Vulnerable Customers Policy</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./about-us.html">Cookie Policy</a>
                </li>

            </ul>
        </div>
        <div class="md:mt-20 row-start-4 row-end-5 lg:row-start-3 lg:row-end-4 md:col-start-1 md:col-end-13 flex gap-3 md:gap-6 flex-row justify-between items-end sm:items-center">
            <ul class="list-none flex gap-3 sm:gap-6 flex-col sm:flex-row">

                <li>
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-tiny" href="./.html">Legal</a>
                </li>

                <li>
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-tiny" href="./.html">Privacy policy</a>
                </li>

                <li>
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-tiny" href="./.html">Terms and conditions </a>
                </li>

            </ul>
            <div class="flex gap-3 flex-wrap">

                <div>
                    <a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 border border-white hover:bg-white group" href="./.html">
                        <div class="relative flex justify-center items-center transition ease-in duration-200">
                            <div class="w-5 h-5">
                                <svg class="w-full h-full fill-current text-white group-hover:text-bravo" aria-hidden="true">
                                    <use href="/front-end/sprite.svg?v=1.2#icon-linkedin"></use>
                                </svg>
                            </div>
                        </div>
                        <span class="sr-only">Open LinkedIn (opens in new window)</span>
                    </a>
                </div>

            </div>
        </div>
        <div class="flex mt-6 pt-2 flex-col gap-3 lg:flex-row lg:mt-6 lg:pt-6 border-t border-white md:justify-between flex-wrap md:col-start-1 md:col-end-13">
            <div class="flex gap-3 lg:gap-6 flex-col lg:flex-row">
                <p class="mr-6 text-tiny">&copy 2026 Gigaclear Ltd. All rights reserved.</p>
                <p class="text-tiny">Gigaclear Ltd is registered in England and Wales. CRN 07476617</p>
            </div>
            <p class="text-tiny">Site by <a class="font-bold border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" target="blank" href="https://www.mentordigital.co.uk">Mentor Digital</a></p>
        </div>
    </div>
</footer>


        <footer class="text-white bg-bravo relative z-50 grid grid-rows-1 grid-cols-1 flex-shrink-0 flex-grow-0 pt-12 sm:pt-20 xl:pt-28">
    <div class="absolute top-0 left-0 w-full h-12 sm:h-20 xl:h-28">
        <svg class="absolute top-0 left-0 w-full h-auto" xmlns="http://www.w3.org/2000/svg" width="1920" height="108" viewBox="0 0 1920 108" fill="none">
            <path d="M8.91763e-10 0H1920V14.3943L0 108L8.91763e-10 0Z" fill="white"/>
        </svg>
    </div>
    <div class="footer container md:grid md:grid-cols-12 md:auto-rows-auto pt-2 lg:pt-10 pb-6 lg:pb-16 h-full gap-x-6 relative z-10">
        <div class="mb-9 row-start-1 row-end-2 col-start-1 col-end-12">
            <div>
                {% render "@footer-logo" %}
            </div>           
        </div>
        <div class="mb-6 row-start-2 row-end-3 md:col-start-1 md:col-end-7 lg:col-start-1 lg:col-end-4">
            <p class="font-bold pb-4 text-xl lg:text-2xl">Home</p>
            <ul class="">
                {% for item in navItems %}
                    <li class="pb-2">
                        <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="{{ item.url | path }}">{{item.menu_item}}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="mb-6 row-start-2 row-end-3 md:col-start-7 md:col-end-13 lg:col-start-4 lg:col-end-7">
            <p class="font-bold pb-4 text-xl lg:text-2xl">Business</p>
            <ul class="">
                {% for item in navItems %}
                    <li class="pb-2">
                        <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="{{ item.url | path }}">{{item.menu_item}}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="mb-6 row-start-3 row-end-4 lg:row-start-2 lg:row-end-3 md:col-start-1 md:col-end-7 lg:col-start-7 lg:col-end-10">
            <p class="font-bold pb-4 text-xl lg:text-2xl">My Account</p>
            <ul class="">
                {% for item in navItemsTwo %}
                    <li class="pb-2">
                        <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="{{ item.url | path }}">{{item.menu_item}}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="mb-6 row-start-3 row-end-4 lg:row-start-2 lg:row-end-3 md:col-start-7 md:col-end-13 lg:col-start-10 lg:col-end-13">
            <p class="font-bold pb-4 text-xl lg:text-2xl">Legal</p>
            <ul class="">
                {% for item in navItemsThree %}
                    <li class="pb-2">
                        <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="{{ item.url | path }}">{{item.menu_item}}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="md:mt-20 row-start-4 row-end-5 lg:row-start-3 lg:row-end-4 md:col-start-1 md:col-end-13 flex gap-3 md:gap-6 flex-row justify-between items-end sm:items-center">
            <ul class="list-none flex gap-3 sm:gap-6 flex-col sm:flex-row">
                {% for item in footerBottomLinks %}
                    <li>
                        <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-tiny" href="{{ item.url | path }}">{{item.name}}</a>
                    </li>
                {% endfor %}
            </ul>
            <div class="flex gap-3 flex-wrap">
                {% for item in socialList %}
                    <div>
                        <a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 border border-white hover:bg-white group" href="{{ item.url | path }}">
                            <div class="relative flex justify-center items-center transition ease-in duration-200">
                                <div class="w-5 h-5">
                                    {% render "@icon", { name: item.iconName, modifier: 'w-full h-full fill-current text-white group-hover:text-bravo', ariaHidden: true } %}
                                </div>
                            </div>
                            <span class="sr-only">Open {{item.name}}  (opens in new window)</span>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="flex mt-6 pt-2 flex-col gap-3 lg:flex-row lg:mt-6 lg:pt-6 border-t border-white md:justify-between flex-wrap md:col-start-1 md:col-end-13">
            <div class="flex gap-3 lg:gap-6 flex-col lg:flex-row">
                <p class="mr-6 text-tiny">&copy 2026 Gigaclear Ltd. All rights reserved.</p>
                <p class="text-tiny">Gigaclear Ltd is registered in England and Wales. CRN 07476617</p>
            </div>
            <p class="text-tiny">Site by <a class="font-bold border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" target="blank" href="https://www.mentordigital.co.uk">Mentor Digital</a></p>
        </div>
    </div>
</footer>


        
            
            {
  "siteName": "Gigaclear Pattern Library",
  "image": {
    "src": "images/test-imagery/example6@16-4@2000w.jpg",
    "srcSet": [
      {
        "url": "images/test-imagery/example6@16-4@2000w.jpg",
        "size": 1200
      }
    ],
    "smMaxSrcSet": [
      {
        "url": "images/test-imagery/example6@1-1@1200w.jpg",
        "size": 1200
      }
    ],
    "mdMaxSrcSet": [
      {
        "url": "images/test-imagery/example6@16-6@2000w.jpg",
        "size": 1920
      }
    ]
  },
  "navItems": [
    {
      "menu_item": "Smart WiFi",
      "url": "./about-us"
    },
    {
      "menu_item": "Home Phone",
      "url": "./sustainability"
    },
    {
      "menu_item": "Careers",
      "url": "./sustainability"
    },
    {
      "menu_item": "Support",
      "url": "./sustainability"
    },
    {
      "menu_item": "About us",
      "url": "./sustainability"
    }
  ],
  "navItemsTwo": [
    {
      "menu_item": "My Gigaclear",
      "url": "./about-us"
    },
    {
      "menu_item": "Network Status",
      "url": "./sustainability"
    },
    {
      "menu_item": "Refer a Friend",
      "url": "./sustainability"
    }
  ],
  "navItemsThree": [
    {
      "menu_item": "Legal",
      "url": "./terms-and-conditions"
    },
    {
      "menu_item": "Privacy Policy",
      "url": "./sustainability"
    },
    {
      "menu_item": "Modern Slavery Statement",
      "url": "./sustainability"
    },
    {
      "menu_item": "Vulnerable Customers Policy",
      "url": "./about-us"
    },
    {
      "menu_item": "Cookie Policy",
      "url": "./about-us"
    }
  ],
  "socialList": [
    {
      "url": "./",
      "iconName": "icon-linkedin",
      "name": "LinkedIn"
    }
  ],
  "footerBottomLinks": [
    {
      "url": "./",
      "name": "Legal"
    },
    {
      "url": "./",
      "name": "Privacy policy"
    },
    {
      "url": "./",
      "name": "Terms and conditions "
    }
  ]
}

Handle: @global-footer
Preview:
- With layout
- Component only
Filesystem Path: fractal\components\05-global\global-footer\global-footer.nunjucks
References (2): @footer-logo, @icon
Referenced by (3): @layout, @layout--business, @layout--smooth-scroll

No notes defined.