BIR Pattern Library

Global Footer 

<footer class="text-white relative z-0 grid grid-rows-1 grid-cols-1 flex-shrink-0 flex-grow-0">
    <div class="absolute w-full h-full top-0 left-0 gradient-dark z-0 rotate-180"></div>
    <div class="absolute w-full h-full top-0 left-0 bg-bravo-900 opacity-50 z-10"></div>
    <div class="footer container md:grid md:grid-cols-12 md:auto-rows-auto py-13 lg:py-20 h-full gap-x-6 relative z-20 row-start-1 row-end-2 col-start-1 col-end-2">
        <div class="mb-6 row-start-1 row-end-2 md:col-start-1 md:col-end-9">
            <a href="./index.html" class="flex items-center lg:block w-72 lg:w-auto">
                <img src="/front-end/images/footer_logo.svg" class="" alt="British Institute of Radiology" width="300" height="85" />
            </a>
        </div>
        <div class="mb-6 md:row-start-2 md:row-end-3 md:col-start-1 md:col-end-6 lg:row-start-1 lg:row-end-2 lg:col-start-7 lg:col-end-10 xl:col-start-9 xl:col-end-11">
            <p class="font-heading font-bold pb-3 text-lg md:text-xl">How can we help?</p>
            <ul class="">

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

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

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

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

            </ul>
        </div>
        <div class="mb-6 md:row-start-2 md:row-end-3 md:col-start-6 md:col-end-13 lg:row-start-1 lg:row-end-2 lg:col-start-10 lg:col-end-13 xl:col-start-11 xl:col-end-13">
            <p class="font-heading font-bold pb-3 text-lg md:text-xl">Terms & policies</p>
            <ul class="">

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

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./.html">Terms &amp; conditions</a>
                </li>

                <li class="pb-2">
                    <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./.html">Equality and diversity</a>
                </li>

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

            </ul>
        </div>
        <div class="mt-16 md:row-start-3 md:row-end-4 lg:row-start-2 lg:row-end-3 md:col-start-1 md:col-end-13 flex flex-col md:flex-row justify-between gap-6">
            <div class="flex flex-col justify-end gap-3">
                <p>Copyright © British Institute of Radiology 2026</p>
                <p>Registered Charity Number: 215869</p>
            </div>
            <div class="flex flex-col md:items-end gap-4">
                <div class="flex gap-3 flex-wrap md:justify-center l">

                    <div>
                        <a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 border border-white group hover:bg-white" 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-900" aria-hidden="true">
                                        <use href="/front-end/sprite.svg#icon-facebook"></use>
                                    </svg>
                                </div>
                            </div>
                            <span class="sr-only">Open Facebook (opens in new window)</span>
                        </a>
                    </div>

                    <div>
                        <a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 border border-white group hover:bg-white" 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-900" aria-hidden="true">
                                        <use href="/front-end/sprite.svg#icon-twitter"></use>
                                    </svg>
                                </div>
                            </div>
                            <span class="sr-only">Open Twitter (opens in new window)</span>
                        </a>
                    </div>

                    <div>
                        <a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 border border-white group hover:bg-white" 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-900" aria-hidden="true">
                                        <use href="/front-end/sprite.svg#icon-linkedin"></use>
                                    </svg>
                                </div>
                            </div>
                            <span class="sr-only">Open LinkedIn (opens in new window)</span>
                        </a>
                    </div>

                    <div>
                        <a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 border border-white group hover:bg-white" 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-900" aria-hidden="true">
                                        <use href="/front-end/sprite.svg#icon-instagram"></use>
                                    </svg>
                                </div>
                            </div>
                            <span class="sr-only">Open Instagram (opens in new window)</span>
                        </a>
                    </div>

                </div>
                <div class="">
                    <p>Site by <a class="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>
        </div>
    </div>
</footer>
 
<footer class="text-white relative z-0 grid grid-rows-1 grid-cols-1 flex-shrink-0 flex-grow-0">
    <div class="absolute w-full h-full top-0 left-0 gradient-dark z-0 rotate-180"></div>
    <div class="absolute w-full h-full top-0 left-0 bg-bravo-900 opacity-50 z-10"></div>
    <div class="footer container md:grid md:grid-cols-12 md:auto-rows-auto py-13 lg:py-20 h-full gap-x-6 relative z-20 row-start-1 row-end-2 col-start-1 col-end-2">
        <div class="mb-6 row-start-1 row-end-2 md:col-start-1 md:col-end-9">
            {% render "@footer-logo" %}
        </div>
        <div class="mb-6 md:row-start-2 md:row-end-3 md:col-start-1 md:col-end-6 lg:row-start-1 lg:row-end-2 lg:col-start-7 lg:col-end-10 xl:col-start-9 xl:col-end-11">
            <p class="font-heading font-bold pb-3 text-lg md:text-xl">How can we help?</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" href="{{ item.url | path }}">{{item.menu_item}}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="mb-6 md:row-start-2 md:row-end-3 md:col-start-6 md:col-end-13 lg:row-start-1 lg:row-end-2 lg:col-start-10 lg:col-end-13 xl:col-start-11 xl:col-end-13">
            <p class="font-heading font-bold pb-3 text-lg md:text-xl">Terms & policies</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" href="{{ item.url | path }}">{{item.menu_item}}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="mt-16 md:row-start-3 md:row-end-4 lg:row-start-2 lg:row-end-3 md:col-start-1 md:col-end-13 flex flex-col md:flex-row justify-between gap-6">
            <div class="flex flex-col justify-end gap-3">
                <p>Copyright © British Institute of Radiology 2026</p>
                <p>Registered Charity Number: 215869</p>
            </div>
            <div class="flex flex-col md:items-end gap-4">
                <div class="flex gap-3 flex-wrap md:justify-center l">
                    {% 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 group hover:bg-white" 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-900', ariaHidden: true } %}
                                    </div>
                                </div>
                                <span class="sr-only">Open {{item.name}}  (opens in new window)</span>
                            </a>
                        </div>
                    {% endfor %}
                </div>
                <div class="">
                    <p>Site by <a class="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>
        </div>
    </div>
</footer>
 
{
  "siteName": "BIR 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": "Contact",
      "url": "./about-us"
    },
    {
      "menu_item": "Membership",
      "url": "./"
    },
    {
      "menu_item": "For Patients",
      "url": "./"
    },
    {
      "menu_item": "Jobs in Radiology",
      "url": "./"
    }
  ],
  "navItemsTwo": [
    {
      "menu_item": "Cookies",
      "url": "./about-us"
    },
    {
      "menu_item": "Terms & conditions",
      "url": "./"
    },
    {
      "menu_item": "Equality and diversity",
      "url": "./"
    },
    {
      "menu_item": "Privacy policy",
      "url": "./"
    }
  ],
  "socialList": [
    {
      "url": "./",
      "iconName": "icon-facebook",
      "name": "Facebook"
    },
    {
      "url": "./",
      "iconName": "icon-twitter",
      "name": "Twitter"
    },
    {
      "url": "./",
      "iconName": "icon-linkedin",
      "name": "LinkedIn"
    },
    {
      "url": "./",
      "iconName": "icon-instagram",
      "name": "Instagram"
    }
  ]
}

No notes defined.