Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK frontend
  2. Footer

Footer

Code

Markup

<footer class="govuk-footer ">
  <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 ">
  <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 ">
  <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 ">
  <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 ">
  <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 ">
  <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 ">
  <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>"
  }
}) }}