Footer ID-SK
Footer
(open in a new window)Code
Markup
<footer class="idsk-footer ">
<div class="govuk-width-container ">
<div class="idsk-footer__meta">
<div class="idsk-footer__meta-item">
<a
class="idsk-footer__licence-logo idsk-footer__link"
href="https://www.mirri.gov.sk/"
>
<img src="/assets/images/header-extended/logo-mirri-farebne.svg" alt="pätička logo">
</a>
</div>
<div class="idsk-footer__meta-item idsk-footer__meta-item--grow">
<span class="idsk-footer__licence-description">
Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.
</span>
<h2 class="govuk-visually-hidden">Support links</h2>
</div>
</div>
</div>
</footer>
Macro
{% from "footer/macro.njk" import idskFooter %}
{{ idskFooter({
"logo": true,
"meta": {
"copy": "Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.",
"footerLogoLink": "https://www.mirri.gov.sk/"
}
}) }}Footer with meta
(open in a new window)Secondary navigation with meta information relating to the site
Code
Markup
<footer class="idsk-footer ">
<div class="govuk-width-container ">
<div class="idsk-footer__meta">
<div class="idsk-footer__meta-item">
<a
class="idsk-footer__licence-logo idsk-footer__link"
href="https://www.mirri.gov.sk/"
>
<img src="/assets/images/header-extended/logo-mirri-farebne.svg" alt="pätička logo">
</a>
</div>
<div class="idsk-footer__meta-item idsk-footer__meta-item--grow">
<span class="idsk-footer__licence-description">
Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.
</span>
<h2 class="govuk-visually-hidden">Items</h2>
<ul class="idsk-footer__inline-list">
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="#1">
Item 1
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="#2">
Item 2
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="#3">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
Macro
{% from "footer/macro.njk" import idskFooter %}
{{ idskFooter({
"logo": true,
"meta": {
"copy": "Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.",
"footerLogoLink": "https://www.mirri.gov.sk/",
"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="idsk-footer ">
<div class="govuk-width-container ">
<div class="idsk-footer__meta">
<div class="idsk-footer__meta-item">
<a
class="idsk-footer__licence-logo idsk-footer__link"
href="https://www.mirri.gov.sk/"
>
<img src="/assets/images/header-extended/logo-mirri-farebne.svg" alt="pätička logo">
</a>
</div>
<div class="idsk-footer__meta-item idsk-footer__meta-item--grow">
<span class="idsk-footer__licence-description">
Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.
</span>
<h2 class="govuk-visually-hidden">Support links</h2>
<div class="idsk-footer__meta-custom">
GOV.UK Prototype Kit v7.0.1
</div>
</div>
</div>
</div>
</footer>
Macro
{% from "footer/macro.njk" import idskFooter %}
{{ idskFooter({
"logo": true,
"meta": {
"copy": "Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.",
"footerLogoLink": "https://www.mirri.gov.sk/",
"text": "GOV.UK Prototype Kit v7.0.1"
}
}) }}Footer with meta links and meta content
(open in a new window)Secondary navigation links and custom meta text
Code
Markup
<footer class="idsk-footer ">
<div class="govuk-width-container ">
<div class="idsk-footer__meta">
<div class="idsk-footer__meta-item">
<a
class="idsk-footer__licence-logo idsk-footer__link"
href="https://www.mirri.gov.sk/"
>
<img src="/assets/images/header-extended/logo-mirri-farebne.svg" alt="pätička logo">
</a>
</div>
<div class="idsk-footer__meta-item idsk-footer__meta-item--grow">
<span class="idsk-footer__licence-description">
Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.
</span>
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="idsk-footer__inline-list">
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="#1">
Bibendum Ornare
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="#2">
Nullam
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="#3">
Tortor Fringilla
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="#4">
Tellus
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="#5">
Egestas Nullam
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="#6">
Euismod Etiam
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="#7">
Fusce Sollicitudin
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="#8">
Ligula Nullam Ultricies
</a>
</li>
</ul>
<div class="idsk-footer__meta-custom">
Built by the <a href="#" class="govuk-footer__link">Department of Magical Law Enforcement</a>
</div>
</div>
</div>
</div>
</footer>
Macro
{% from "footer/macro.njk" import idskFooter %}
{{ idskFooter({
"logo": true,
"meta": {
"copy": "Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.",
"footerLogoLink": "https://www.mirri.gov.sk/",
"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="idsk-footer ">
<div class="govuk-width-container ">
<div class="idsk-footer__meta">
<div class="idsk-footer__meta-item">
<a
class="idsk-footer__licence-logo idsk-footer__link"
href="https://www.mirri.gov.sk/"
>
<img src="/assets/images/header-extended/logo-mirri-farebne.svg" alt="pätička logo">
</a>
</div>
<div class="idsk-footer__meta-item idsk-footer__meta-item--grow">
<span class="idsk-footer__licence-description">
Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.
</span>
<h2 class="govuk-visually-hidden">Support links</h2>
<div class="idsk-footer__meta-custom">
GOV.UK Prototype Kit v7.0.1
</div>
</div>
</div>
</div>
</footer>
Macro
{% from "footer/macro.njk" import idskFooter %}
{{ idskFooter({
"logo": true,
"meta": {
"copy": "Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.",
"footerLogoLink": "https://www.mirri.gov.sk/",
"text": "GOV.UK Prototype Kit v7.0.1"
}
}) }}Footer with navigation
(open in a new window)Code
Markup
<footer class="idsk-footer ">
<div class="govuk-width-container ">
<div class="idsk-footer__navigation">
<div class="idsk-footer__section">
<h2 class="idsk-footer__heading govuk-heading-m">Two column list</h2>
<ul class="idsk-footer__list idsk-footer__list--columns-2">
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="#1">
Navigation item 1
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="#2">
Navigation item 2
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="#3">
Navigation item 3
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="#4">
Navigation item 4
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="#5">
Navigation item 5
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="#6">
Navigation item 6
</a>
</li>
</ul>
</div>
<div class="idsk-footer__section">
<h2 class="idsk-footer__heading govuk-heading-m">Single column list</h2>
<ul class="idsk-footer__list ">
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="#1">
Navigation item 1
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="#2">
Navigation item 2
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="#3">
Navigation item 3
</a>
</li>
</ul>
</div>
</div>
<hr class="idsk-footer__section-break">
<div class="idsk-footer__meta">
<div class="idsk-footer__meta-item">
<a
class="idsk-footer__licence-logo idsk-footer__link"
href="https://www.mirri.gov.sk/"
>
<img src="/assets/images/header-extended/logo-mirri-farebne.svg" alt="pätička logo">
</a>
</div>
<div class="idsk-footer__meta-item idsk-footer__meta-item--grow">
<span class="idsk-footer__licence-description">
Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.
</span>
<h2 class="govuk-visually-hidden">Support links</h2>
</div>
</div>
</div>
</footer>
Macro
{% from "footer/macro.njk" import idskFooter %}
{{ idskFooter({
"logo": true,
"meta": {
"copy": "Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.",
"footerLogoLink": "https://www.mirri.gov.sk/"
},
"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"
}
]
}
]
}) }}Footer GOV.UK
(open in a new window)A full example based on GOV.UK's current footer
Code
Markup
<footer class="idsk-footer ">
<div class="govuk-width-container ">
<div class="idsk-footer__navigation">
<div class="idsk-footer__section">
<h2 class="idsk-footer__heading govuk-heading-m">Services and information</h2>
<ul class="idsk-footer__list idsk-footer__list--columns-2">
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/benefits">
Benefits
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/births-deaths-marriages">
Births, deaths, marriages and care
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/business">
Business and self-employed
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/childcare-parenting">
Childcare and parenting
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/citizenship">
Citizenship and living in the UK
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/justice">
Crime, justice and the law
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/disabilities">
Disabled people
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/driving">
Driving and transport
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/education">
Education and learning
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/employing-people">
Employing people
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/environment-countryside">
Environment and countryside
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/housing-local-services">
Housing and local services
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/tax">
Money and tax
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/abroad">
Passports, travel and living abroad
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/visas-immigration">
Visas and immigration
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/browse/working">
Working, jobs and pensions
</a>
</li>
</ul>
</div>
<div class="idsk-footer__section">
<h2 class="idsk-footer__heading govuk-heading-m">Departments and policy</h2>
<ul class="idsk-footer__list ">
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/government/how-government-works">
How government works
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/government/organisations">
Departments
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/world">
Worldwide
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/government/policies">
Policies
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/government/publications">
Publications
</a>
</li>
<li class="idsk-footer__list-item">
<a class="idsk-footer__link" href="/government/announcements">
Announcements
</a>
</li>
</ul>
</div>
</div>
<hr class="idsk-footer__section-break">
<div class="idsk-footer__meta">
<div class="idsk-footer__meta-item">
<a
class="idsk-footer__licence-logo idsk-footer__link"
href="https://www.mirri.gov.sk/"
>
<img src="/assets/images/header-extended/logo-mirri-farebne.svg" alt="pätička logo">
</a>
</div>
<div class="idsk-footer__meta-item idsk-footer__meta-item--grow">
<span class="idsk-footer__licence-description">
Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.
</span>
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="idsk-footer__inline-list">
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="/help">
Help
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="/help/cookies">
Cookies
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="/contact">
Contact
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="/help/terms-conditions">
Terms and conditions
</a>
</li>
<li class="idsk-footer__inline-list-item">
<a class="idsk-footer__link" href="/cymraeg">
Rhestr o Wasanaethau Cymraeg
</a>
</li>
</ul>
<div class="idsk-footer__meta-custom">
Built by the <a class="govuk-footer__link" href="#">Government Digital Service</a>
</div>
</div>
</div>
</div>
</footer>
Macro
{% from "footer/macro.njk" import idskFooter %}
{{ idskFooter({
"logo": true,
"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": {
"copy": "Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky. Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.",
"footerLogoLink": "https://www.mirri.gov.sk/",
"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>"
}
}) }}