Footer

Code

Markup

<footer class="govuk-footer " role="contentinfo">
  <div class="govuk-width-container ">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">

        <svg
          role="presentation"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewbox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >© Crown copyright</a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({}) }}

Footer with meta

(open in a new window)

Secondary navigation with meta information relating to the site

Code

Markup

<footer class="govuk-footer " role="contentinfo">
  <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">Items</h2>
            <ul class="govuk-footer__inline-list">
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="#1">
                    Item 1
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="#2">
                    Item 2
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="#3">
                    Item 3
                  </a>
                </li>
            </ul>

        <svg
          role="presentation"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewbox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >© Crown copyright</a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "meta": {
    "visuallyHiddenTitle": "Items",
    "items": [
      {
        "href": "#1",
        "text": "Item 1"
      },
      {
        "href": "#2",
        "text": "Item 2"
      },
      {
        "href": "#3",
        "text": "Item 3"
      }
    ]
  }
}) }}

Footer with custom meta

(open in a new window)

Custom meta section

Code

Markup

<footer class="govuk-footer " role="contentinfo">
  <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>
            <div class="govuk-footer__meta-custom">
              GOV.UK Prototype Kit v7.0.1
            </div>

        <svg
          role="presentation"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewbox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >© Crown copyright</a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "meta": {
    "text": "GOV.UK Prototype Kit v7.0.1"
  }
}) }}
(open in a new window)

Secondary navigation links and custom meta text

Code

Markup

<footer class="govuk-footer " role="contentinfo">
  <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="#1">
                    Bibendum Ornare
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="#2">
                    Nullam
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="#3">
                    Tortor Fringilla
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="#4">
                    Tellus
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="#5">
                    Egestas Nullam
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="#6">
                    Euismod Etiam
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="#7">
                    Fusce Sollicitudin
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="#8">
                    Ligula Nullam Ultricies
                  </a>
                </li>
            </ul>
            <div class="govuk-footer__meta-custom">
              Built by the <a href="#" class="govuk-footer__link">Department of Magical Law Enforcement</a>
            </div>

        <svg
          role="presentation"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewbox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >© Crown copyright</a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "meta": {
    "items": [
      {
        "href": "#1",
        "text": "Bibendum Ornare"
      },
      {
        "href": "#2",
        "text": "Nullam"
      },
      {
        "href": "#3",
        "text": "Tortor Fringilla"
      },
      {
        "href": "#4",
        "text": "Tellus"
      },
      {
        "href": "#5",
        "text": "Egestas Nullam"
      },
      {
        "href": "#6",
        "text": "Euismod Etiam"
      },
      {
        "href": "#7",
        "text": "Fusce Sollicitudin"
      },
      {
        "href": "#8",
        "text": "Ligula Nullam Ultricies"
      }
    ],
    "html": "Built by the <a href=\"#\" class=\"govuk-footer__link\">Department of Magical Law Enforcement</a>"
  }
}) }}

Footer with custom meta

(open in a new window)

Custom meta section

Code

Markup

<footer class="govuk-footer " role="contentinfo">
  <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>
            <div class="govuk-footer__meta-custom">
              GOV.UK Prototype Kit v7.0.1
            </div>

        <svg
          role="presentation"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewbox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >© Crown copyright</a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "meta": {
    "text": "GOV.UK Prototype Kit v7.0.1"
  }
}) }}

Footer with navigation

(open in a new window)
Code

Markup

<footer class="govuk-footer " role="contentinfo">
  <div class="govuk-width-container ">
      <div class="govuk-footer__navigation">
          <div class="govuk-footer__section">
            <h2 class="govuk-footer__heading govuk-heading-m">Two column list</h2>
              <ul class="govuk-footer__list govuk-footer__list--columns-2">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#1">
                        Navigation item 1
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#2">
                        Navigation item 2
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#3">
                        Navigation item 3
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#4">
                        Navigation item 4
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#5">
                        Navigation item 5
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#6">
                        Navigation item 6
                      </a>
                    </li>
              </ul>
          </div>
          <div class="govuk-footer__section">
            <h2 class="govuk-footer__heading govuk-heading-m">Single column list</h2>
              <ul class="govuk-footer__list ">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#1">
                        Navigation item 1
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#2">
                        Navigation item 2
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#3">
                        Navigation item 3
                      </a>
                    </li>
              </ul>
          </div>
      </div>
      <hr class="govuk-footer__section-break">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">

        <svg
          role="presentation"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewbox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >© Crown copyright</a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "navigation": [
    {
      "title": "Two column list",
      "columns": 2,
      "items": [
        {
          "href": "#1",
          "text": "Navigation item 1"
        },
        {
          "href": "#2",
          "text": "Navigation item 2"
        },
        {
          "href": "#3",
          "text": "Navigation item 3"
        },
        {
          "href": "#4",
          "text": "Navigation item 4"
        },
        {
          "href": "#5",
          "text": "Navigation item 5"
        },
        {
          "href": "#6",
          "text": "Navigation item 6"
        }
      ]
    },
    {
      "title": "Single column list",
      "items": [
        {
          "href": "#1",
          "text": "Navigation item 1"
        },
        {
          "href": "#2",
          "text": "Navigation item 2"
        },
        {
          "href": "#3",
          "text": "Navigation item 3"
        }
      ]
    }
  ]
}) }}

A full example based on GOV.UK's current footer

Code

Markup

<footer class="govuk-footer " role="contentinfo">
  <div class="govuk-width-container ">
      <div class="govuk-footer__navigation">
          <div class="govuk-footer__section">
            <h2 class="govuk-footer__heading govuk-heading-m">Services and information</h2>
              <ul class="govuk-footer__list govuk-footer__list--columns-2">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/benefits">
                        Benefits
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/births-deaths-marriages">
                        Births, deaths, marriages and care
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/business">
                        Business and self-employed
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/childcare-parenting">
                        Childcare and parenting
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/citizenship">
                        Citizenship and living in the UK
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/justice">
                        Crime, justice and the law
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/disabilities">
                        Disabled people
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/driving">
                        Driving and transport
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/education">
                        Education and learning
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/employing-people">
                        Employing people
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/environment-countryside">
                        Environment and countryside
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/housing-local-services">
                        Housing and local services
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/tax">
                        Money and tax
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/abroad">
                        Passports, travel and living abroad
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/visas-immigration">
                        Visas and immigration
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/working">
                        Working, jobs and pensions
                      </a>
                    </li>
              </ul>
          </div>
          <div class="govuk-footer__section">
            <h2 class="govuk-footer__heading govuk-heading-m">Departments and policy</h2>
              <ul class="govuk-footer__list ">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/government/how-government-works">
                        How government works
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/government/organisations">
                        Departments
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/world">
                        Worldwide
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/government/policies">
                        Policies
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/government/publications">
                        Publications
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/government/announcements">
                        Announcements
                      </a>
                    </li>
              </ul>
          </div>
      </div>
      <hr class="govuk-footer__section-break">
    <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="/help">
                    Help
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="/help/cookies">
                    Cookies
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="/contact">
                    Contact
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="/help/terms-conditions">
                    Terms and conditions
                  </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                  <a class="govuk-footer__link" href="/cymraeg">
                    Rhestr o Wasanaethau Cymraeg
                  </a>
                </li>
            </ul>
            <div class="govuk-footer__meta-custom">
              Built by the <a class="govuk-footer__link" href="#">Government Digital Service</a>
            </div>

        <svg
          role="presentation"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewbox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >© Crown copyright</a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "navigation": [
    {
      "title": "Services and information",
      "columns": 2,
      "items": [
        {
          "href": "/browse/benefits",
          "text": "Benefits"
        },
        {
          "href": "/browse/births-deaths-marriages",
          "text": "Births, deaths, marriages and care"
        },
        {
          "href": "/browse/business",
          "text": "Business and self-employed"
        },
        {
          "href": "/browse/childcare-parenting",
          "text": "Childcare and parenting"
        },
        {
          "href": "/browse/citizenship",
          "text": "Citizenship and living in the UK"
        },
        {
          "href": "/browse/justice",
          "text": "Crime, justice and the law"
        },
        {
          "href": "/browse/disabilities",
          "text": "Disabled people"
        },
        {
          "href": "/browse/driving",
          "text": "Driving and transport"
        },
        {
          "href": "/browse/education",
          "text": "Education and learning"
        },
        {
          "href": "/browse/employing-people",
          "text": "Employing people"
        },
        {
          "href": "/browse/environment-countryside",
          "text": "Environment and countryside"
        },
        {
          "href": "/browse/housing-local-services",
          "text": "Housing and local services"
        },
        {
          "href": "/browse/tax",
          "text": "Money and tax"
        },
        {
          "href": "/browse/abroad",
          "text": "Passports, travel and living abroad"
        },
        {
          "href": "/browse/visas-immigration",
          "text": "Visas and immigration"
        },
        {
          "href": "/browse/working",
          "text": "Working, jobs and pensions"
        }
      ]
    },
    {
      "title": "Departments and policy",
      "items": [
        {
          "href": "/government/how-government-works",
          "text": "How government works"
        },
        {
          "href": "/government/organisations",
          "text": "Departments"
        },
        {
          "href": "/world",
          "text": "Worldwide"
        },
        {
          "href": "/government/policies",
          "text": "Policies"
        },
        {
          "href": "/government/publications",
          "text": "Publications"
        },
        {
          "href": "/government/announcements",
          "text": "Announcements"
        }
      ]
    }
  ],
  "meta": {
    "items": [
      {
        "href": "/help",
        "text": "Help"
      },
      {
        "href": "/help/cookies",
        "text": "Cookies"
      },
      {
        "href": "/contact",
        "text": "Contact"
      },
      {
        "href": "/help/terms-conditions",
        "text": "Terms and conditions"
      },
      {
        "href": "/cymraeg",
        "text": "Rhestr o Wasanaethau Cymraeg"
      }
    ],
    "html": "Built by the <a class=\"govuk-footer__link\" href=\"#\">Government Digital Service</a>"
  }
}) }}