Toto je interná vývojová aplikácia.
Ak sa chcete dozvedieť, ako používať systém IDSK system vo svojom projekte, pozrite si Ako začať.

  1. ID-SK
  2. Všetky komponenty
  3. Päta

Footer - Päta

Päta

Otvoriť príklad na novej záložke: päta

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({}) }}

Päta s navigáciou

Otvoriť príklad na novej záložke: päta 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ásady 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ásady bezpečnosti"
      }
    ]
  }
}) }}

Päta bez navigácie s odkazmi

Otvoriť príklad na novej záložke: päta 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"
        }
      ]
    }
  ]
}) }}

Päta s navigáciou a odkazmi

Otvoriť príklad na novej záložke: päta 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ásady 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ásady bezpečnosti"
      }
    ]
  }
}) }}