Header web ID-SK
Header web - hlavička pre webové sídla (bez banera)
(open in a new window)Code
Markup
<header class="idsk-header-web " data-module="idsk-header-web">
<div class="idsk-header-web__scrolling-wrapper">
<div class="idsk-header-web__tricolor"></div>
<div class="idsk-header-web__brand ">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="idsk-header-web__brand-gestor">
<span class="govuk-body-s idsk-header-web__brand-gestor-text">
Oficiálna stránka
<button class="idsk-header-web__brand-gestor-button" aria-label="Zobraziť informácie o stránke" aria-expanded="false" data-text-for-hide="Skryť informácie o stránke" data-text-for-show="Zobraziť informácie o stránke">
verejnej správy SR
<span class="idsk-header-web__link-arrow"></span>
</button>
</span>
<span class="govuk-body-s idsk-header-web__brand-gestor-text--mobile">
SK
<button class="idsk-header-web__brand-gestor-button" aria-label="Zobraziť informácie o stránke" aria-expanded="false" data-text-for-hide="Skryť informácie o stránke" data-text-for-show="Zobraziť informácie o stránke">
e-gov
<span class="idsk-header-web__link-arrow"></span>
</button>
</span>
<div class="idsk-header-web__brand-dropdown">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<h3 class="govuk-body-s">
Doména gov.sk je oficálna
</h3>
<p class="govuk-body-s">
Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. <a class="govuk-link" href="https://www.slovensko.sk/sk/agendy/agenda/_organy-verejnej-moci" target="_blank" title="odkazy na webové sídla orgánov verejnej moci">Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze</a>.
</p>
</div>
<div class="govuk-grid-column-one-half">
<h3 class="govuk-body-s">
Táto stránka je zabezpečená
</h3>
<p class="govuk-body-s">
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.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__brand-spacer"></div>
<div class="idsk-header-web__brand-language">
<button class="idsk-header-web__brand-language-button" aria-label="Rozbaliť jazykové menu" aria-expanded="false" data-text-for-hide="Skryť jazykové menu" data-text-for-show="Rozbaliť jazykové menu">
Slovenčina
<span class="idsk-header-web__link-arrow"></span>
</button>
<ul class="idsk-header-web__brand-language-list">
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link "
title="Deutsch"
href="#">
Deutsch
</a>
</li>
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link "
title="English"
href="#">
English
</a>
</li>
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link "
title="Español"
href="#">
Español
</a>
</li>
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link idsk-header-web__brand-language-list-item-link--selected"
title="Slovenčina"
href="#">
Slovenčina
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__main">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
<div class="idsk-header-web__main-headline">
<a href="/" title="Odkaz na úvodnú stránku">
<img src="/assets/images/header-web/logo-mirri-farebne.svg"
alt="Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky"
class="idsk-header-web__main-headline-logo">
</a>
<button class="idsk-button idsk-header-web__main-headline-menu-button" aria-label="Rozbaliť menu" aria-expanded="false"
data-text-for-show="Rozbaliť menu" data-text-for-hide="Zavrieť menu">
Menu
<span class="idsk-header-web__menu-open"></span>
<span class="idsk-header-web__menu-close"></span>
</button>
</div>
</div>
<div class="govuk-grid-column-two-thirds">
<div class="idsk-header-web__main-action">
<form class="idsk-header-web__main-action-search">
<input class="govuk-input govuk-!-display-inline-block" id="idsk-header-web__main-action-search-input" name="search"
placeholder="Zadajte hľadaný výraz"
title="Zadajte hľadaný výraz" type="search" aria-label="Zadajte hľadaný výraz" />
<button type="submit" class="govuk-button" data-module="govuk-button">
<span class="govuk-visually-hidden">Vyhľadať</span>
<i aria-hidden="true" class="fas fa-search"></i>
</button>
</form>
<div class="idsk-header-web__main--buttons">
<div class="idsk-header-web__main--login ">
<button type="button" class="idsk-button idsk-header-web__main--login-loginbtn" data-module="idsk-button">
Prihlásiť sa
</button>
<div class="idsk-header-web__main--login-action">
<img class="idsk-header-web__main--login-action-profile-img"
src="/assets/images/header-web/profile.svg"
alt="Profile image">
<div class="idsk-header-web__main--login-action-text">
<span class="govuk-body-s idsk-header-web__main--login-action-text-user-name">
Ing. Jožko Veľký M.A
</span>
<div class="govuk-!-margin-bottom-1">
<a class="govuk-link idsk-header-web__main--login-action-text-logout idsk-header-web__main--login-logoutbtn" href="#" title="odhlásiť">
Odhlásiť
</a>
<span> | </span>
<a class="govuk-link idsk-header-web__main--login-action-text-profile idsk-header-web__main--login-profilebtn" href="#" title="profil">
Profil
</a>
</div>
</div>
</div>
<button type="button" class="idsk-button idsk-header-web__main--login-profilebtn" data-module="idsk-button">
Profil
</button>
<button type="button" class="idsk-button idsk-header-web__main--login-logoutbtn" data-module="idsk-button">
Odhlásiť sa
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__nav--divider"></div>
<div class="idsk-header-web__nav idsk-header-web__nav--mobile ">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
</div>
<div class="govuk-grid-column-full">
<nav class="idsk-header-web__nav-bar--buttons">
<ul class="idsk-header-web__nav-list "
aria-label="Hlavná navigácia">
<li class="idsk-header-web__nav-list-item">
<a class="govuk-link idsk-header-web__nav-list-item-link" href="#1" title="Občan" aria-label="Rozbaliť Občan menu" aria-expanded="false"
data-text-for-hide="Zavrieť Občan menu" data-text-for-show="Rozbaliť Občan menu" >
Občan
<div class="idsk-header-web__link-arrow"></div>
<div class="idsk-header-web__link-arrow-mobile"></div>
</a>
<div class="idsk-header-web__nav-submenulite">
<ul class="idsk-header-web__nav-submenulite-list" aria-label="Vnútorná navigácia">
<li class="idsk-header-web__nav-submenulite-list-item">
<a class="govuk-link idsk-header-web__nav-submenulite-list-item-link" href="#1"
title="Eurofondy">
<span>Eurofondy</span>
</a>
</li>
<li class="idsk-header-web__nav-submenulite-list-item">
<a class="govuk-link idsk-header-web__nav-submenulite-list-item-link" href="#2"
title="Regionálny rozvoj">
<span>Regionálny rozvoj</span>
</a>
</li>
<li class="idsk-header-web__nav-submenulite-list-item">
<a class="govuk-link idsk-header-web__nav-submenulite-list-item-link" href="#3"
title="Informatizácia">
<span>Informatizácia</span>
</a>
</li>
<li class="idsk-header-web__nav-submenulite-list-item">
<a class="govuk-link idsk-header-web__nav-submenulite-list-item-link" href="#4"
title="Investície">
<span>Investície</span>
</a>
</li>
</ul>
</div>
</li>
<li class="idsk-header-web__nav-list-item">
<a class="govuk-link idsk-header-web__nav-list-item-link" href="#2" title="Podnikateľ" aria-label="Rozbaliť Podnikateľ menu" aria-expanded="false"
data-text-for-hide="Zavrieť Podnikateľ menu" data-text-for-show="Rozbaliť Podnikateľ menu" >
Podnikateľ
<div class="idsk-header-web__link-arrow"></div>
<div class="idsk-header-web__link-arrow-mobile"></div>
</a>
<div class="idsk-header-web__nav-submenu">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<ul class="idsk-header-web__nav-submenu-list" aria-label="Vnútorná navigácia">
<li class="idsk-header-web__nav-submenu-list-item">
<a class="govuk-link idsk-header-web__nav-submenu-list-item-link" href="#1"
title="Eurofondy">
<span>Eurofondy</span>
</a>
</li>
<li class="idsk-header-web__nav-submenu-list-item">
<a class="govuk-link idsk-header-web__nav-submenu-list-item-link" href="#2"
title="Regionálny rozvoj">
<span>Regionálny rozvoj</span>
</a>
</li>
<li class="idsk-header-web__nav-submenu-list-item">
<a class="govuk-link idsk-header-web__nav-submenu-list-item-link" href="#3"
title="Informatizácia">
<span>Informatizácia</span>
</a>
</li>
<li class="idsk-header-web__nav-submenu-list-item">
<a class="govuk-link idsk-header-web__nav-submenu-list-item-link" href="#4"
title="Investície">
<span>Investície</span>
</a>
</li>
<li class="idsk-header-web__nav-submenu-list-item">
<a class="govuk-link idsk-header-web__nav-submenu-list-item-link" href="#3"
title="Informatizácia">
<span>Informatizácia</span>
</a>
</li>
<li class="idsk-header-web__nav-submenu-list-item">
<a class="govuk-link idsk-header-web__nav-submenu-list-item-link" href="#4"
title="Investície">
<span>Investície</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="idsk-header-web__nav-list-item">
<a class="govuk-link idsk-header-web__nav-list-item-link" href="#3" title="Dôchodca" >
Dôchodca
</a>
</li>
<li class="idsk-header-web__nav-list-item">
<a class="govuk-link idsk-header-web__nav-list-item-link" href="#4" title="Elektronické služby" >
Elektronické služby
</a>
</li>
<li class="idsk-header-web__nav-list-item">
<a class="govuk-link idsk-header-web__nav-list-item-link" href="#5" title="Inovácie" >
Inovácie
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="idsk-header-web__main--buttons">
<div class="idsk-header-web__main--login ">
<button type="button" class="idsk-button idsk-header-web__main--login-loginbtn" data-module="idsk-button">
Prihlásiť sa
</button>
<div class="idsk-header-web__main--login-action">
<img class="idsk-header-web__main--login-action-profile-img"
src="/assets/images/header-web/profile.svg"
alt="Profile image">
<div class="idsk-header-web__main--login-action-text">
<span class="govuk-body-s idsk-header-web__main--login-action-text-user-name">
Ing. Jožko Veľký M.A
</span>
<div class="govuk-!-margin-bottom-1">
<a class="govuk-link idsk-header-web__main--login-action-text-logout idsk-header-web__main--login-logoutbtn" href="#" title="odhlásiť">
Odhlásiť
</a>
<span> | </span>
<a class="govuk-link idsk-header-web__main--login-action-text-profile idsk-header-web__main--login-profilebtn" href="#" title="profil">
Profil
</a>
</div>
</div>
</div>
<button type="button" class="idsk-button idsk-header-web__main--login-profilebtn" data-module="idsk-button">
Profil
</button>
<button type="button" class="idsk-button idsk-header-web__main--login-logoutbtn" data-module="idsk-button">
Odhlásiť sa
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Macro
{% from "header-web/macro.njk" import idskHeaderWeb %}
{{ idskHeaderWeb({
"headerType": "website",
"brand": {
"gestor": true,
"languages": [
{
"text": "Slovenčina",
"selected": "true,",
"link": "#"
},
{
"text": "Deutsch",
"link": "#"
},
{
"text": "English",
"link": "#"
},
{
"text": "Español",
"link": "#"
}
]
},
"main": {
"showLogo": true,
"logoSrc": "logo-mirri-farebne.svg",
"loginButton": true,
"profileButton": true,
"secondaryButton": false
},
"search": true,
"navBar": {
"navigation": [
{
"text": "Občan",
"submenu": [
{
"link": "#1",
"text": "Eurofondy"
},
{
"link": "#2",
"text": "Regionálny rozvoj"
},
{
"link": "#3",
"text": "Informatizácia"
},
{
"link": "#4",
"text": "Investície"
}
]
},
{
"text": "Podnikateľ",
"submenu": [
{
"link": "#1",
"text": "Eurofondy"
},
{
"link": "#2",
"text": "Regionálny rozvoj"
},
{
"link": "#3",
"text": "Informatizácia"
},
{
"link": "#4",
"text": "Investície"
},
{
"link": "#3",
"text": "Informatizácia"
},
{
"link": "#4",
"text": "Investície"
}
]
},
{
"link": "#3",
"text": "Dôchodca"
},
{
"link": "#4",
"text": "Elektronické služby"
},
{
"link": "#5",
"text": "Inovácie"
}
]
}
}) }}Header web - hlavička pre webové sídla (s banerom)
(open in a new window)Code
Markup
<header class="idsk-header-web " data-module="idsk-header-web">
<div class="idsk-header-web__scrolling-wrapper">
<div class="idsk-header-web__banner idsk-header-web__banner--warning">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="govuk-body-s idsk-header-web__banner-title">
<div class="idsk-header-web__warning-icon"></div>
Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu.
</div>
<button class="idsk-header-web__banner-close" aria-label="Zavrieť banner"><span class="idsk-header-web__menu-close"></span></button>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__tricolor"></div>
<div class="idsk-header-web__brand ">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="idsk-header-web__brand-gestor">
<span class="govuk-body-s idsk-header-web__brand-gestor-text">
Oficiálna stránka
<button class="idsk-header-web__brand-gestor-button" aria-label="Zobraziť informácie o stránke" aria-expanded="false" data-text-for-hide="Skryť informácie o stránke" data-text-for-show="Zobraziť informácie o stránke">
verejnej správy SR
<span class="idsk-header-web__link-arrow"></span>
</button>
</span>
<span class="govuk-body-s idsk-header-web__brand-gestor-text--mobile">
SK
<button class="idsk-header-web__brand-gestor-button" aria-label="Zobraziť informácie o stránke" aria-expanded="false" data-text-for-hide="Skryť informácie o stránke" data-text-for-show="Zobraziť informácie o stránke">
e-gov
<span class="idsk-header-web__link-arrow"></span>
</button>
</span>
<div class="idsk-header-web__brand-dropdown">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<h3 class="govuk-body-s">
Doména gov.sk je oficálna
</h3>
<p class="govuk-body-s">
Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. <a class="govuk-link" href="https://www.slovensko.sk/sk/agendy/agenda/_organy-verejnej-moci" target="_blank" title="odkazy na webové sídla orgánov verejnej moci">Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze</a>.
</p>
</div>
<div class="govuk-grid-column-one-half">
<h3 class="govuk-body-s">
Táto stránka je zabezpečená
</h3>
<p class="govuk-body-s">
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.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__brand-spacer"></div>
<div class="idsk-header-web__brand-language">
<button class="idsk-header-web__brand-language-button" aria-label="Rozbaliť jazykové menu" aria-expanded="false" data-text-for-hide="Skryť jazykové menu" data-text-for-show="Rozbaliť jazykové menu">
Slovenčina
<span class="idsk-header-web__link-arrow"></span>
</button>
<ul class="idsk-header-web__brand-language-list">
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link "
title="Deutsch"
href="#">
Deutsch
</a>
</li>
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link "
title="English"
href="#">
English
</a>
</li>
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link "
title="Español"
href="#">
Español
</a>
</li>
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link idsk-header-web__brand-language-list-item-link--selected"
title="Slovenčina"
href="#">
Slovenčina
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__main">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
<div class="idsk-header-web__main-headline">
<a href="/" title="Odkaz na úvodnú stránku">
<img src="/assets/images/header-web/logo-mirri-farebne.svg"
alt="Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky"
class="idsk-header-web__main-headline-logo">
</a>
<button class="idsk-button idsk-header-web__main-headline-menu-button" aria-label="Rozbaliť menu" aria-expanded="false"
data-text-for-show="Rozbaliť menu" data-text-for-hide="Zavrieť menu">
Menu
<span class="idsk-header-web__menu-open"></span>
<span class="idsk-header-web__menu-close"></span>
</button>
</div>
</div>
<div class="govuk-grid-column-two-thirds">
<div class="idsk-header-web__main-action">
<form class="idsk-header-web__main-action-search">
<input class="govuk-input govuk-!-display-inline-block" id="idsk-header-web__main-action-search-input" name="search"
placeholder="Zadajte hľadaný výraz"
title="Zadajte hľadaný výraz" type="search" aria-label="Zadajte hľadaný výraz" />
<button type="submit" class="govuk-button" data-module="govuk-button">
<span class="govuk-visually-hidden">Vyhľadať</span>
<i aria-hidden="true" class="fas fa-search"></i>
</button>
</form>
<div class="idsk-header-web__main--buttons">
<div class="idsk-header-web__main--login ">
<button type="button" class="idsk-button idsk-header-web__main--login-loginbtn" data-module="idsk-button">
Prihlásiť sa
</button>
<div class="idsk-header-web__main--login-action">
<img class="idsk-header-web__main--login-action-profile-img"
src="/assets/images/header-web/profile.svg"
alt="Profile image">
<div class="idsk-header-web__main--login-action-text">
<span class="govuk-body-s idsk-header-web__main--login-action-text-user-name">
Ing. Jožko Veľký M.A
</span>
<div class="govuk-!-margin-bottom-1">
<a class="govuk-link idsk-header-web__main--login-action-text-logout idsk-header-web__main--login-logoutbtn" href="#" title="odhlásiť">
Odhlásiť
</a>
<span> | </span>
<a class="govuk-link idsk-header-web__main--login-action-text-profile idsk-header-web__main--login-profilebtn" href="#" title="profil">
Profil
</a>
</div>
</div>
</div>
<button type="button" class="idsk-button idsk-header-web__main--login-profilebtn" data-module="idsk-button">
Profil
</button>
<button type="button" class="idsk-button idsk-header-web__main--login-logoutbtn" data-module="idsk-button">
Odhlásiť sa
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__nav--divider"></div>
<div class="idsk-header-web__nav idsk-header-web__nav--mobile ">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
</div>
<div class="govuk-grid-column-full">
<nav class="idsk-header-web__nav-bar--buttons">
<ul class="idsk-header-web__nav-list "
aria-label="Hlavná navigácia">
<li class="idsk-header-web__nav-list-item">
<a class="govuk-link idsk-header-web__nav-list-item-link" href="#1" title="Občan" aria-label="Rozbaliť Občan menu" aria-expanded="false"
data-text-for-hide="Zavrieť Občan menu" data-text-for-show="Rozbaliť Občan menu" >
Občan
<div class="idsk-header-web__link-arrow"></div>
<div class="idsk-header-web__link-arrow-mobile"></div>
</a>
<div class="idsk-header-web__nav-submenulite">
<ul class="idsk-header-web__nav-submenulite-list" aria-label="Vnútorná navigácia">
<li class="idsk-header-web__nav-submenulite-list-item">
<a class="govuk-link idsk-header-web__nav-submenulite-list-item-link" href="#1"
title="Eurofondy">
<span>Eurofondy</span>
</a>
</li>
<li class="idsk-header-web__nav-submenulite-list-item">
<a class="govuk-link idsk-header-web__nav-submenulite-list-item-link" href="#2"
title="Regionálny rozvoj">
<span>Regionálny rozvoj</span>
</a>
</li>
<li class="idsk-header-web__nav-submenulite-list-item">
<a class="govuk-link idsk-header-web__nav-submenulite-list-item-link" href="#3"
title="Informatizácia">
<span>Informatizácia</span>
</a>
</li>
<li class="idsk-header-web__nav-submenulite-list-item">
<a class="govuk-link idsk-header-web__nav-submenulite-list-item-link" href="#4"
title="Investície">
<span>Investície</span>
</a>
</li>
</ul>
</div>
</li>
<li class="idsk-header-web__nav-list-item">
<a class="govuk-link idsk-header-web__nav-list-item-link" href="#2" title="Podnikateľ" aria-label="Rozbaliť Podnikateľ menu" aria-expanded="false"
data-text-for-hide="Zavrieť Podnikateľ menu" data-text-for-show="Rozbaliť Podnikateľ menu" >
Podnikateľ
<div class="idsk-header-web__link-arrow"></div>
<div class="idsk-header-web__link-arrow-mobile"></div>
</a>
<div class="idsk-header-web__nav-submenu">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<ul class="idsk-header-web__nav-submenu-list" aria-label="Vnútorná navigácia">
<li class="idsk-header-web__nav-submenu-list-item">
<a class="govuk-link idsk-header-web__nav-submenu-list-item-link" href="#1"
title="Eurofondy">
<span>Eurofondy</span>
</a>
</li>
<li class="idsk-header-web__nav-submenu-list-item">
<a class="govuk-link idsk-header-web__nav-submenu-list-item-link" href="#2"
title="Regionálny rozvoj">
<span>Regionálny rozvoj</span>
</a>
</li>
<li class="idsk-header-web__nav-submenu-list-item">
<a class="govuk-link idsk-header-web__nav-submenu-list-item-link" href="#3"
title="Informatizácia">
<span>Informatizácia</span>
</a>
</li>
<li class="idsk-header-web__nav-submenu-list-item">
<a class="govuk-link idsk-header-web__nav-submenu-list-item-link" href="#4"
title="Investície">
<span>Investície</span>
</a>
</li>
<li class="idsk-header-web__nav-submenu-list-item">
<a class="govuk-link idsk-header-web__nav-submenu-list-item-link" href="#3"
title="Informatizácia">
<span>Informatizácia</span>
</a>
</li>
<li class="idsk-header-web__nav-submenu-list-item">
<a class="govuk-link idsk-header-web__nav-submenu-list-item-link" href="#4"
title="Investície">
<span>Investície</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="idsk-header-web__nav-list-item">
<a class="govuk-link idsk-header-web__nav-list-item-link" href="#3" title="Dôchodca" >
Dôchodca
</a>
</li>
<li class="idsk-header-web__nav-list-item">
<a class="govuk-link idsk-header-web__nav-list-item-link" href="#4" title="Elektronické služby" >
Elektronické služby
</a>
</li>
<li class="idsk-header-web__nav-list-item">
<a class="govuk-link idsk-header-web__nav-list-item-link" href="#5" title="Inovácie" >
Inovácie
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="idsk-header-web__main--buttons">
<div class="idsk-header-web__main--login ">
<button type="button" class="idsk-button idsk-header-web__main--login-loginbtn" data-module="idsk-button">
Prihlásiť sa
</button>
<div class="idsk-header-web__main--login-action">
<img class="idsk-header-web__main--login-action-profile-img"
src="/assets/images/header-web/profile.svg"
alt="Profile image">
<div class="idsk-header-web__main--login-action-text">
<span class="govuk-body-s idsk-header-web__main--login-action-text-user-name">
Ing. Jožko Veľký M.A
</span>
<div class="govuk-!-margin-bottom-1">
<a class="govuk-link idsk-header-web__main--login-action-text-logout idsk-header-web__main--login-logoutbtn" href="#" title="odhlásiť">
Odhlásiť
</a>
<span> | </span>
<a class="govuk-link idsk-header-web__main--login-action-text-profile idsk-header-web__main--login-profilebtn" href="#" title="profil">
Profil
</a>
</div>
</div>
</div>
<button type="button" class="idsk-button idsk-header-web__main--login-profilebtn" data-module="idsk-button">
Profil
</button>
<button type="button" class="idsk-button idsk-header-web__main--login-logoutbtn" data-module="idsk-button">
Odhlásiť sa
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Macro
{% from "header-web/macro.njk" import idskHeaderWeb %}
{{ idskHeaderWeb({
"headerType": "website",
"brand": {
"gestor": true,
"languages": [
{
"text": "Slovenčina",
"selected": "true,",
"link": "#"
},
{
"text": "Deutsch",
"link": "#"
},
{
"text": "English",
"link": "#"
},
{
"text": "Español",
"link": "#"
}
]
},
"main": {
"showLogo": true,
"logoSrc": "logo-mirri-farebne.svg",
"loginButton": true,
"profileButton": true,
"secondaryButton": false
},
"search": true,
"navBar": {
"navigation": [
{
"text": "Občan",
"submenu": [
{
"link": "#1",
"text": "Eurofondy"
},
{
"link": "#2",
"text": "Regionálny rozvoj"
},
{
"link": "#3",
"text": "Informatizácia"
},
{
"link": "#4",
"text": "Investície"
}
]
},
{
"text": "Podnikateľ",
"submenu": [
{
"link": "#1",
"text": "Eurofondy"
},
{
"link": "#2",
"text": "Regionálny rozvoj"
},
{
"link": "#3",
"text": "Informatizácia"
},
{
"link": "#4",
"text": "Investície"
},
{
"link": "#3",
"text": "Informatizácia"
},
{
"link": "#4",
"text": "Investície"
}
]
},
{
"link": "#3",
"text": "Dôchodca"
},
{
"link": "#4",
"text": "Elektronické služby"
},
{
"link": "#5",
"text": "Inovácie"
}
]
},
"banner": {
"text": "Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu.",
"warning": true
}
}) }}Header web - hlavička pre elektronické služby (bez banera)
(open in a new window)Code
Markup
<header class="idsk-header-web " data-module="idsk-header-web">
<div class="idsk-header-web__scrolling-wrapper">
<div class="idsk-header-web__tricolor"></div>
<div class="idsk-header-web__brand ">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="idsk-header-web__brand-gestor">
<span class="govuk-body-s idsk-header-web__brand-gestor-text">
Oficiálna stránka
<button class="idsk-header-web__brand-gestor-button" aria-label="Zobraziť informácie o stránke" aria-expanded="false" data-text-for-hide="Skryť informácie o stránke" data-text-for-show="Zobraziť informácie o stránke">
verejnej správy SR
<span class="idsk-header-web__link-arrow"></span>
</button>
</span>
<span class="govuk-body-s idsk-header-web__brand-gestor-text--mobile">
SK
<button class="idsk-header-web__brand-gestor-button" aria-label="Zobraziť informácie o stránke" aria-expanded="false" data-text-for-hide="Skryť informácie o stránke" data-text-for-show="Zobraziť informácie o stránke">
e-gov
<span class="idsk-header-web__link-arrow"></span>
</button>
</span>
<div class="idsk-header-web__brand-dropdown">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<h3 class="govuk-body-s">
Doména gov.sk je oficálna
</h3>
<p class="govuk-body-s">
Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. <a class="govuk-link" href="https://www.slovensko.sk/sk/agendy/agenda/_organy-verejnej-moci" target="_blank" title="odkazy na webové sídla orgánov verejnej moci">Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze</a>.
</p>
</div>
<div class="govuk-grid-column-one-half">
<h3 class="govuk-body-s">
Táto stránka je zabezpečená
</h3>
<p class="govuk-body-s">
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.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__brand-spacer"></div>
<div class="idsk-header-web__brand-language">
<button class="idsk-header-web__brand-language-button" aria-label="Rozbaliť jazykové menu" aria-expanded="false" data-text-for-hide="Skryť jazykové menu" data-text-for-show="Rozbaliť jazykové menu">
Slovenčina
<span class="idsk-header-web__link-arrow"></span>
</button>
<ul class="idsk-header-web__brand-language-list">
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link "
title="Deutsch"
href="#">
Deutsch
</a>
</li>
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link "
title="English"
href="#">
English
</a>
</li>
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link "
title="Español"
href="#">
Español
</a>
</li>
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link idsk-header-web__brand-language-list-item-link--selected"
title="Slovenčina"
href="#">
Slovenčina
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__main">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
<div class="idsk-header-web__main-headline">
<a href="/" title="Odkaz na úvodnú stránku">
<h2 class="govuk-heading-m">Ministerstvo investícií</h2>
</a>
<button class="idsk-button idsk-header-web__main-headline-menu-button idsk-header-web__main-headline-menu-button-service"
aria-label="Rozbaliť menu" aria-expanded="false" data-text-for-show="Rozbaliť menu" data-text-for-hide="Zavrieť menu">
<img src="/assets/images/header-web//profile.svg" alt="Electronic service menu icon">
<span class="idsk-header-web__menu-close"></span>
</button>
</div>
</div>
<div class="govuk-grid-column-two-thirds">
<div class="idsk-header-web__main-action">
<div class="idsk-header-web__main--buttons">
<div class="idsk-header-web__main--login ">
<button type="button" class="idsk-button idsk-header-web__main--login-loginbtn" data-module="idsk-button">
Prihlásiť sa
</button>
<div class="idsk-header-web__main--login-action">
<img class="idsk-header-web__main--login-action-profile-img"
src="/assets/images/header-web/profile.svg"
alt="Profile image">
<div class="idsk-header-web__main--login-action-text">
<span class="govuk-body-s idsk-header-web__main--login-action-text-user-name">
Ing. Jožko Veľký M.A
</span>
<div class="govuk-!-margin-bottom-1">
<a class="govuk-link idsk-header-web__main--login-action-text-logout idsk-header-web__main--login-logoutbtn" href="#" title="odhlásiť">
Odhlásiť
</a>
<span> | </span>
<a class="govuk-link idsk-header-web__main--login-action-text-profile idsk-header-web__main--login-profilebtn" href="#" title="profil">
Profil
</a>
</div>
</div>
</div>
<button type="button" class="idsk-button idsk-header-web__main--login-profilebtn" data-module="idsk-button">
Profil
</button>
<button type="button" class="idsk-button idsk-header-web__main--login-logoutbtn" data-module="idsk-button">
Odhlásiť sa
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__nav idsk-header-web__nav--mobile ">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
</div>
</div>
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="idsk-header-web__main--buttons">
<div class="idsk-header-web__main--login ">
<button type="button" class="idsk-button idsk-header-web__main--login-loginbtn" data-module="idsk-button">
Prihlásiť sa
</button>
<div class="idsk-header-web__main--login-action">
<img class="idsk-header-web__main--login-action-profile-img"
src="/assets/images/header-web/profile.svg"
alt="Profile image">
<div class="idsk-header-web__main--login-action-text">
<span class="govuk-body-s idsk-header-web__main--login-action-text-user-name">
Ing. Jožko Veľký M.A
</span>
<div class="govuk-!-margin-bottom-1">
<a class="govuk-link idsk-header-web__main--login-action-text-logout idsk-header-web__main--login-logoutbtn" href="#" title="odhlásiť">
Odhlásiť
</a>
<span> | </span>
<a class="govuk-link idsk-header-web__main--login-action-text-profile idsk-header-web__main--login-profilebtn" href="#" title="profil">
Profil
</a>
</div>
</div>
</div>
<button type="button" class="idsk-button idsk-header-web__main--login-profilebtn" data-module="idsk-button">
Profil
</button>
<button type="button" class="idsk-button idsk-header-web__main--login-logoutbtn" data-module="idsk-button">
Odhlásiť sa
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Macro
{% from "header-web/macro.njk" import idskHeaderWeb %}
{{ idskHeaderWeb({
"headerType": "electronicService",
"brand": {
"gestor": true,
"languages": [
{
"text": "Slovenčina",
"selected": "true,",
"link": "#"
},
{
"text": "Deutsch",
"link": "#"
},
{
"text": "English",
"link": "#"
},
{
"text": "Español",
"link": "#"
}
]
},
"main": {
"title": "Ministerstvo investícií",
"loginButton": true,
"profileButton": true,
"secondaryButton": false
}
}) }}Header web - hlavička pre elektronické služby (s banerom)
(open in a new window)Code
Markup
<header class="idsk-header-web " data-module="idsk-header-web">
<div class="idsk-header-web__scrolling-wrapper">
<div class="idsk-header-web__banner ">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="govuk-body-s idsk-header-web__banner-title">
Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu.
</div>
<button class="idsk-header-web__banner-close" aria-label="Zavrieť banner"><span class="idsk-header-web__menu-close"></span></button>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__tricolor"></div>
<div class="idsk-header-web__brand ">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="idsk-header-web__brand-gestor">
<span class="govuk-body-s idsk-header-web__brand-gestor-text">
Oficiálna stránka
<button class="idsk-header-web__brand-gestor-button" aria-label="Zobraziť informácie o stránke" aria-expanded="false" data-text-for-hide="Skryť informácie o stránke" data-text-for-show="Zobraziť informácie o stránke">
verejnej správy SR
<span class="idsk-header-web__link-arrow"></span>
</button>
</span>
<span class="govuk-body-s idsk-header-web__brand-gestor-text--mobile">
SK
<button class="idsk-header-web__brand-gestor-button" aria-label="Zobraziť informácie o stránke" aria-expanded="false" data-text-for-hide="Skryť informácie o stránke" data-text-for-show="Zobraziť informácie o stránke">
e-gov
<span class="idsk-header-web__link-arrow"></span>
</button>
</span>
<div class="idsk-header-web__brand-dropdown">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<h3 class="govuk-body-s">
Doména gov.sk je oficálna
</h3>
<p class="govuk-body-s">
Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. <a class="govuk-link" href="https://www.slovensko.sk/sk/agendy/agenda/_organy-verejnej-moci" target="_blank" title="odkazy na webové sídla orgánov verejnej moci">Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze</a>.
</p>
</div>
<div class="govuk-grid-column-one-half">
<h3 class="govuk-body-s">
Táto stránka je zabezpečená
</h3>
<p class="govuk-body-s">
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.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__brand-spacer"></div>
<div class="idsk-header-web__brand-language">
<button class="idsk-header-web__brand-language-button" aria-label="Rozbaliť jazykové menu" aria-expanded="false" data-text-for-hide="Skryť jazykové menu" data-text-for-show="Rozbaliť jazykové menu">
Slovenčina
<span class="idsk-header-web__link-arrow"></span>
</button>
<ul class="idsk-header-web__brand-language-list">
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link "
title="Deutsch"
href="#">
Deutsch
</a>
</li>
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link "
title="English"
href="#">
English
</a>
</li>
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link "
title="Español"
href="#">
Español
</a>
</li>
<li class="idsk-header-web__brand-language-list-item">
<a class="govuk-link idsk-header-web__brand-language-list-item-link idsk-header-web__brand-language-list-item-link--selected"
title="Slovenčina"
href="#">
Slovenčina
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__main">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
<div class="idsk-header-web__main-headline">
<a href="/" title="Odkaz na úvodnú stránku">
<h2 class="govuk-heading-m">Ministerstvo investícií</h2>
</a>
<button class="idsk-button idsk-header-web__main-headline-menu-button idsk-header-web__main-headline-menu-button-service"
aria-label="Rozbaliť menu" aria-expanded="false" data-text-for-show="Rozbaliť menu" data-text-for-hide="Zavrieť menu">
<img src="/assets/images/header-web//profile.svg" alt="Electronic service menu icon">
<span class="idsk-header-web__menu-close"></span>
</button>
</div>
</div>
<div class="govuk-grid-column-two-thirds">
<div class="idsk-header-web__main-action">
<div class="idsk-header-web__main--buttons">
<div class="idsk-header-web__main--login ">
<button type="button" class="idsk-button idsk-header-web__main--login-loginbtn" data-module="idsk-button">
Prihlásiť sa
</button>
<div class="idsk-header-web__main--login-action">
<img class="idsk-header-web__main--login-action-profile-img"
src="/assets/images/header-web/profile.svg"
alt="Profile image">
<div class="idsk-header-web__main--login-action-text">
<span class="govuk-body-s idsk-header-web__main--login-action-text-user-name">
Ing. Jožko Veľký M.A
</span>
<div class="govuk-!-margin-bottom-1">
<a class="govuk-link idsk-header-web__main--login-action-text-logout idsk-header-web__main--login-logoutbtn" href="#" title="odhlásiť">
Odhlásiť
</a>
<span> | </span>
<a class="govuk-link idsk-header-web__main--login-action-text-profile idsk-header-web__main--login-profilebtn" href="#" title="profil">
Profil
</a>
</div>
</div>
</div>
<button type="button" class="idsk-button idsk-header-web__main--login-profilebtn" data-module="idsk-button">
Profil
</button>
<button type="button" class="idsk-button idsk-header-web__main--login-logoutbtn" data-module="idsk-button">
Odhlásiť sa
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="idsk-header-web__nav idsk-header-web__nav--mobile ">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
</div>
</div>
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="idsk-header-web__main--buttons">
<div class="idsk-header-web__main--login ">
<button type="button" class="idsk-button idsk-header-web__main--login-loginbtn" data-module="idsk-button">
Prihlásiť sa
</button>
<div class="idsk-header-web__main--login-action">
<img class="idsk-header-web__main--login-action-profile-img"
src="/assets/images/header-web/profile.svg"
alt="Profile image">
<div class="idsk-header-web__main--login-action-text">
<span class="govuk-body-s idsk-header-web__main--login-action-text-user-name">
Ing. Jožko Veľký M.A
</span>
<div class="govuk-!-margin-bottom-1">
<a class="govuk-link idsk-header-web__main--login-action-text-logout idsk-header-web__main--login-logoutbtn" href="#" title="odhlásiť">
Odhlásiť
</a>
<span> | </span>
<a class="govuk-link idsk-header-web__main--login-action-text-profile idsk-header-web__main--login-profilebtn" href="#" title="profil">
Profil
</a>
</div>
</div>
</div>
<button type="button" class="idsk-button idsk-header-web__main--login-profilebtn" data-module="idsk-button">
Profil
</button>
<button type="button" class="idsk-button idsk-header-web__main--login-logoutbtn" data-module="idsk-button">
Odhlásiť sa
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Macro
{% from "header-web/macro.njk" import idskHeaderWeb %}
{{ idskHeaderWeb({
"headerType": "electronicService",
"brand": {
"gestor": true,
"languages": [
{
"text": "Slovenčina",
"selected": "true,",
"link": "#"
},
{
"text": "Deutsch",
"link": "#"
},
{
"text": "English",
"link": "#"
},
{
"text": "Español",
"link": "#"
}
]
},
"main": {
"title": "Ministerstvo investícií",
"loginButton": true,
"profileButton": true,
"secondaryButton": false
},
"banner": {
"text": "Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu.",
"warning": false
}
}) }}