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">
<span class="govuk-footer__licence-description">
Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie SR.
<br />
Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.
</span>
</div>
<div class="govuk-footer__meta-item">
<a
class="govuk-footer__link govuk-footer__copyright-logo"
href="#"
>
<img src="/assets/images/logo-moje.png" alt="Slovensko.sk" />
</a>
</div>
</div>
</div>
</footer>
Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({}) }}Footer s navigáciou
Open this example in a new tab: footer s navigáciou
Základná pätička s navigáciou
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">
Vyhlásenie o prístupnosti
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#2">
Kontakt na prevádzkovateľa
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#3">
RSS
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#4">
Mapa stránky
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#5">
Metodické usmernenia
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#6">
Oznamy
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#7">
Základné zásadz bezpečnosti
</a>
</li>
</ul>
<span class="govuk-footer__licence-description">
Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie SR.
<br />
Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.
</span>
</div>
<div class="govuk-footer__meta-item">
<a
class="govuk-footer__link govuk-footer__copyright-logo"
href="#"
>
<img src="/assets/images/logo-moje.png" alt="Slovensko.sk" />
</a>
</div>
</div>
</div>
</footer>
Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
meta: {
visuallyHiddenTitle: "Items",
items: [
{
href: "#1",
text: "Vyhlásenie o prístupnosti"
},
{
href: "#2",
text: "Kontakt na prevádzkovateľa"
},
{
href: "#3",
text: "RSS"
},
{
href: "#4",
text: "Mapa stránky"
},
{
href: "#5",
text: "Metodické usmernenia"
},
{
href: "#6",
text: "Oznamy"
},
{
href: "#7",
text: "Základné zásadz bezpečnosti"
}
]
}
}) }}Footer bez navigácie s odkazmi
Open this example in a new tab: footer bez navigácie s odkazmi
Code
Markup
<footer class="govuk-footer">
<div class="govuk-width-container">
<div class="govuk-footer__navigation">
<div class="govuk-footer__section govuk-grid-column-two-thirds">
<h2 class="govuk-footer__heading govuk-heading-m">Názov</h2>
<ul class="govuk-footer__list govuk-footer__list--columns-2">
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#1">
Položka 1
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#2">
Položka 2
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#3">
Položka 3
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#4">
Položka 4
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#5">
Položka 5
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#6">
Položka 6
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#7">
Položka 7
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#8">
Položka 8
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#9">
Položka 9
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#10">
Položka 10
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#11">
Položka 11
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#12">
Položka 12
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#13">
Položka 13
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#14">
Položka 14
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#15">
Položka 15
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#16">
Položka 16
</a>
</li>
</ul>
</div>
<div class="govuk-footer__section govuk-grid-column-one-third">
<h2 class="govuk-footer__heading govuk-heading-m">Názov</h2>
<ul class="govuk-footer__list">
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#1">
Položka 1
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#2">
Položka 2
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#3">
Položka 3
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#4">
Položka 4
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#5">
Položka 5
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#6">
Položka 6
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#7">
Položka 7
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#8">
Položka 8
</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">
<span class="govuk-footer__licence-description">
Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie SR.
<br />
Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.
</span>
</div>
<div class="govuk-footer__meta-item">
<a
class="govuk-footer__link govuk-footer__copyright-logo"
href="#"
>
<img src="/assets/images/logo-moje.png" alt="Slovensko.sk" />
</a>
</div>
</div>
</div>
</footer>
Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
navigation: [
{
title: "Názov",
width: "two-thirds",
columns: 2,
items: [
{
href: "#1",
text: "Položka 1"
},
{
href: "#2",
text: "Položka 2"
},
{
href: "#3",
text: "Položka 3"
},
{
href: "#4",
text: "Položka 4"
},
{
href: "#5",
text: "Položka 5"
},
{
href: "#6",
text: "Položka 6"
},
{
href: "#7",
text: "Položka 7"
},
{
href: "#8",
text: "Položka 8"
},
{
href: "#9",
text: "Položka 9"
},
{
href: "#10",
text: "Položka 10"
},
{
href: "#11",
text: "Položka 11"
},
{
href: "#12",
text: "Položka 12"
},
{
href: "#13",
text: "Položka 13"
},
{
href: "#14",
text: "Položka 14"
},
{
href: "#15",
text: "Položka 15"
},
{
href: "#16",
text: "Položka 16"
}
]
},
{
title: "Názov",
width: "one-third",
items: [
{
href: "#1",
text: "Položka 1"
},
{
href: "#2",
text: "Položka 2"
},
{
href: "#3",
text: "Položka 3"
},
{
href: "#4",
text: "Položka 4"
},
{
href: "#5",
text: "Položka 5"
},
{
href: "#6",
text: "Položka 6"
},
{
href: "#7",
text: "Položka 7"
},
{
href: "#8",
text: "Položka 8"
}
]
}
]
}) }}Footer s navigáciou a odkazmi
Open this example in a new tab: footer s navigáciou a odkazmi
Code
Markup
<footer class="govuk-footer">
<div class="govuk-width-container">
<div class="govuk-footer__navigation">
<div class="govuk-footer__section govuk-grid-column-two-thirds">
<h2 class="govuk-footer__heading govuk-heading-m">Názov</h2>
<ul class="govuk-footer__list govuk-footer__list--columns-2">
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#1">
Položka 1
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#2">
Položka 2
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#3">
Položka 3
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#4">
Položka 4
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#5">
Položka 5
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#6">
Položka 6
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#7">
Položka 7
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#8">
Položka 8
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#9">
Položka 9
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#10">
Položka 10
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#11">
Položka 11
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#12">
Položka 12
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#13">
Položka 13
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#14">
Položka 14
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#15">
Položka 15
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#16">
Položka 16
</a>
</li>
</ul>
</div>
<div class="govuk-footer__section govuk-grid-column-one-third">
<h2 class="govuk-footer__heading govuk-heading-m">Názov</h2>
<ul class="govuk-footer__list">
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#1">
Položka 1
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#2">
Položka 2
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#3">
Položka 3
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#4">
Položka 4
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#5">
Položka 5
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#6">
Položka 6
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#7">
Položka 7
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#8">
Položka 8
</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">Items</h2>
<ul class="govuk-footer__inline-list">
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#1">
Vyhlásenie o prístupnosti
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#2">
Kontakt na prevádzkovateľa
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#3">
RSS
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#4">
Mapa stránky
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#5">
Metodické usmernenia
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#6">
Oznamy
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#7">
Základné zásadz bezpečnosti
</a>
</li>
</ul>
<span class="govuk-footer__licence-description">
Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie SR.
<br />
Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.
</span>
</div>
<div class="govuk-footer__meta-item">
<a
class="govuk-footer__link govuk-footer__copyright-logo"
href="#"
>
<img src="/assets/images/logo-moje.png" alt="Slovensko.sk" />
</a>
</div>
</div>
</div>
</footer>
Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
navigation: [
{
title: "Názov",
width: "two-thirds",
columns: 2,
items: [
{
href: "#1",
text: "Položka 1"
},
{
href: "#2",
text: "Položka 2"
},
{
href: "#3",
text: "Položka 3"
},
{
href: "#4",
text: "Položka 4"
},
{
href: "#5",
text: "Položka 5"
},
{
href: "#6",
text: "Položka 6"
},
{
href: "#7",
text: "Položka 7"
},
{
href: "#8",
text: "Položka 8"
},
{
href: "#9",
text: "Položka 9"
},
{
href: "#10",
text: "Položka 10"
},
{
href: "#11",
text: "Položka 11"
},
{
href: "#12",
text: "Položka 12"
},
{
href: "#13",
text: "Položka 13"
},
{
href: "#14",
text: "Položka 14"
},
{
href: "#15",
text: "Položka 15"
},
{
href: "#16",
text: "Položka 16"
}
]
},
{
title: "Názov",
width: "one-third",
items: [
{
href: "#1",
text: "Položka 1"
},
{
href: "#2",
text: "Položka 2"
},
{
href: "#3",
text: "Položka 3"
},
{
href: "#4",
text: "Položka 4"
},
{
href: "#5",
text: "Položka 5"
},
{
href: "#6",
text: "Položka 6"
},
{
href: "#7",
text: "Položka 7"
},
{
href: "#8",
text: "Položka 8"
}
]
}
],
meta: {
visuallyHiddenTitle: "Items",
items: [
{
href: "#1",
text: "Vyhlásenie o prístupnosti"
},
{
href: "#2",
text: "Kontakt na prevádzkovateľa"
},
{
href: "#3",
text: "RSS"
},
{
href: "#4",
text: "Mapa stránky"
},
{
href: "#5",
text: "Metodické usmernenia"
},
{
href: "#6",
text: "Oznamy"
},
{
href: "#7",
text: "Základné zásadz bezpečnosti"
}
]
}
}) }}