Footer

Standard

Default

Show code

<footer class="govuk-footer iai-footer">
    <div class="govuk-width-container">
        <div class="govuk-footer__meta">
            <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
                <h2 class="govuk-visually-hidden">Support links</h2>
                <ul class="govuk-footer__inline-list">
                    <li class="govuk-footer__inline-list-item">
                        <a class="govuk-footer__link" href="#">Accessibility statement</a>
                    </li>
                    <li class="govuk-footer__inline-list-item">
                        <a class="govuk-footer__link" href="#">Sitemap</a>
                    </li>
                    <li class="govuk-footer__inline-list-item">
                        <a class="govuk-footer__link" href="#">Cookies</a>
                    </li>
                    <li class="govuk-footer__inline-list-item">
                        <a class="govuk-footer__link" href="#">Privacy</a>
                    </li>
                    <li class="govuk-footer__inline-list-item">
                        <a class="govuk-footer__link" href="#">Contact the team</a>
                    </li>
                </ul>
                <div class="govuk-footer__meta-custom">
                    Built by the <a class="govuk-footer__link" href="https://ai.gov.uk/">Incubator for Artificial
                        Intelligence</a>
                </div>
            </div>
            <div class="govuk-footer__meta-item"></div>
        </div>
    </div>
</footer>

---
import { Footer } from "@i-dot-ai-npm/component-library-astro";

const links = [
    { text: "Accessibility statement", href: "#" },
    { text: "Sitemap", href: "#" },
    { text: "Cookies", href: "#" },
    { text: "Privacy", href: "#" },
    { text: "Contact the team", href: "#" },
];
---

<Footer links={links} />

import { Footer } from "@i-dot-ai-npm/component-library-react";

const links = [
    { text: "Accessibility statement", href: "#" },
    { text: "Sitemap", href: "#" },
    { text: "Cookies", href: "#" },
    { text: "Privacy", href: "#" },
    { text: "Contact the team", href: "#" },
];

export function ExampleFooter() {
    return <Footer links={links} />;
}

<script>
    import { Footer } from "@i-dot-ai-npm/component-library-svelte";

    const links = [
        { text: "Accessibility statement", href: "#" },
        { text: "Sitemap", href: "#" },
        { text: "Cookies", href: "#" },
        { text: "Privacy", href: "#" },
        { text: "Contact the team", href: "#" },
    ];
</script>

<Footer {links} />

/** @jsxImportSource solid-js */
import { Footer } from "@i-dot-ai-npm/component-library-solid";

const links = [
    { text: "Accessibility statement", href: "#" },
    { text: "Sitemap", href: "#" },
    { text: "Cookies", href: "#" },
    { text: "Privacy", href: "#" },
    { text: "Contact the team", href: "#" },
];

export function ExampleFooter() {
    return <Footer links={links} />;
}

When to use this component

Use this footer when building a product that is for i.AI or another department in government, alongside the generic header.

This footer is the default. An experimental product, or one whose audience is not yet settled, starts with this footer and can switch to the GOV.UK footer later.

When not to use this component

Do not use the generic footer for a public-facing or cross-government service. Use the GOV.UK footer instead so the product reads as GOV.UK.