Footer

Default

Svelte code

<script>
	import { Footer } from '@danboscaro/govuk-svelte'
</script>

<Footer {...{}} />

With custom HTML content licence and copyright notice

Svelte code

<script>
	import { Footer } from '@danboscaro/govuk-svelte'
</script>

<Footer {...{
  contentLicence: {
    html: "Mae’r holl gynnwys ar gael dan <a class=\"govuk-footer__link\" href=\"https://www.nationalarchives.gov.uk/doc/open-government-licence-cymraeg/version/3/\" rel=\"license\">Drwydded y Llywodraeth Agored v3.0</a>, ac eithrio lle nodir yn wahanol"
  },
  copyright: {
    html: "<span>Hawlfraint y Goron</span>"
  }
}} />

With custom text content licence and copyright notice

Svelte code

<script>
	import { Footer } from '@danboscaro/govuk-svelte'
</script>

<Footer {...{
  contentLicence: {
    text: "Mae’r holl gynnwys ar gael dan Drwydded y Llywodraeth Agored v3.0, ac eithrio lle nodir yn wahanol"
  },
  copyright: {
    text: "© Hawlfraint y Goron"
  }
}} />

With meta

Svelte code

<script>
	import { Footer } from '@danboscaro/govuk-svelte'
</script>

<Footer {...{
  meta: {
    visuallyHiddenTitle: "Items",
    items: [
      {
        href: "#1",
        text: "Item 1"
      },
      {
        href: "#2",
        text: "Item 2"
      },
      {
        href: "#3",
        text: "Item 3"
      }
    ]
  }
}} />

With custom meta

Svelte code

<script>
	import { Footer } from '@danboscaro/govuk-svelte'
</script>

<Footer {...{
  meta: {
    text: "GOV.UK Prototype Kit v7.0.1"
  }
}} />

With meta links and meta content

Svelte code

<script>
	import { Footer } from '@danboscaro/govuk-svelte'
</script>

<Footer {...{
  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>"
  }
}} />

With custom meta

Svelte code

<script>
	import { Footer } from '@danboscaro/govuk-svelte'
</script>

<Footer {...{
  meta: {
    text: "GOV.UK Prototype Kit v7.0.1"
  }
}} />

With default width navigation (one column)

Svelte code

<script>
	import { Footer } from '@danboscaro/govuk-svelte'
</script>

<Footer {...{
  navigation: [
    {
      title: "Navigation section",
      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"
        }
      ]
    }
  ]
}} />

With default width navigation (two columns)

Svelte code

<script>
	import { Footer } from '@danboscaro/govuk-svelte'
</script>

<Footer {...{
  navigation: [
    {
      title: "Navigation section",
      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"
        }
      ]
    }
  ]
}} />

With navigation

Svelte code

<script>
	import { Footer } from '@danboscaro/govuk-svelte'
</script>

<Footer {...{
  navigation: [
    {
      title: "Two column list",
      width: "two-thirds",
      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",
      width: "one-third",
      items: [
        {
          href: "#1",
          text: "Navigation item 1"
        },
        {
          href: "#2",
          text: "Navigation item 2"
        },
        {
          href: "#3",
          text: "Navigation item 3"
        }
      ]
    }
  ]
}} />

Full GDS example

Svelte code

<script>
	import { Footer } from '@danboscaro/govuk-svelte'
</script>

<Footer {...{
  navigation: [
    {
      title: "Coronavirus (COVID-19)",
      width: "two-thirds",
      items: [
        {
          href: "/coronavirus",
          text: "Coronavirus (COVID-19): guidance and support"
        }
      ]
    },
    {
      title: "Brexit",
      width: "one-third",
      items: [
        {
          href: "/brexit",
          text: "Check what you need to do"
        }
      ]
    },
    {
      title: "Services and information",
      width: "two-thirds",
      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",
      width: "one-third",
      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>"
  }
}} />

Three equal columns

Svelte code

<script>
	import { Footer } from '@danboscaro/govuk-svelte'
</script>

<Footer {...{
  navigation: [
    {
      title: "Single column list 1",
      width: "one-third",
      columns: 1,
      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 2",
      width: "one-third",
      columns: 1,
      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 3",
      width: "one-third",
      columns: 1,
      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"
        }
      ]
    }
  ]
}} />