<header class="gov-header">
<div class="gov-header__divider">
<div class="gov-header__content">
<gov-flex justify-content="space-between" align-items="center" responsive="false">
<a href="/" class="gov-header__logo" aria-label="Zpět na úvodní stránku">
<gov-flex align-items="center" gap="s" responsive="false">
<svg width="40" height="40" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.9996 30.6162V33.9503H28.3332V35.6167H26.6655V40.6172H24.9991V38.9508H23.3328V40.6172H21.6664V37.2831H23.3328V35.6167H24.9991V32.2839H23.3328V27.2834H20V32.2839H9.99914V30.6162H8.33276V28.9498H10.833V27.2834H12.4994V28.9498H14.9996V23.9506H21.6664V22.2829H20V20.6165H14.9996V22.2829H13.3332V20.6165H11.6655V22.2829H8.33276V23.9506H6.66638V22.2829H5V18.9501H6.66638V17.2837H8.33276V18.9501H9.99914V17.2837H13.3332V15.6173H11.6655V13.9497H9.99914V12.2833H6.66638V10.6169H8.33276V7.28407H6.66638V5.61639H9.99914V3.94999H11.6655V5.61639H13.3332V7.28407H11.6655V8.95047H13.3332V10.6169H14.9996V12.2833H16.666V10.6169H18.3323V8.95047H21.6664V7.28407H18.3323V5.61639H20V3.94999H24.9991V5.61639H26.6655V3.94999H28.3332V2.28359H29.9996V10.6169H28.3332V8.95047H26.6655V10.6169H28.3332V12.2833H26.6655V13.9497H24.9991V15.6173H26.6655V17.2837H24.9991V22.2829H26.6655V23.9506H28.3332V25.617H29.9996V23.9506H28.3332V20.6165H29.9996V18.9501H31.666V20.6165H33.3323V22.2829H31.666V25.617H33.3323V27.2834H34.9987V28.9498H31.666V30.6162H29.9996V28.9498H28.3332V27.2834H26.6655V30.6162H29.9996ZM24.9991 2.28359H20V0.617188H24.9991V2.28359ZM14.9996 7.28279H16.666V8.94918H14.9996V7.28279ZM26.6668 20.6165L26.6655 17.2837H28.3319V20.6165H26.6668ZM28.3332 17.2825V12.2833H29.9996V17.2825H28.3332ZM33.3323 20.6165V17.2837H34.9987V20.6165H33.3323ZM31.666 17.2825V12.2833H33.3323V17.2837L31.666 17.2825ZM33.3336 10.6169H35V12.2833H33.3323L33.3336 10.6169ZM33.3323 3.94999H34.9987V8.95047H33.3323L33.3336 10.6169H31.666V2.28359H33.3323V3.94999ZM29.9996 10.6169H31.666V12.2833H29.9996V10.6169ZM23.3328 33.9503V35.6167H21.6664V33.9503H23.3328ZM9.99914 32.2852V33.9516H8.33276V32.2852H9.99914Z" fill="currentColor" />
</svg> <span>Název úřadu</span>
</gov-flex>
</a>
<gov-flex class="gov-header__mobile" align-items="center" gap="s" responsive="false">
<gov-button color="primary" size="m" type="base" aria-label="Přihlásit se">
<gov-icon type="templates" name="person-fill" slot="icon-start" color="primary" size="m"></gov-icon>
</gov-button>
<gov-button color="primary" size="m" type="base" aria-label="Otevřít hlavní navigaci" class=" js-gov-header__navigation-trigger">
<gov-icon type="templates" name="list" slot="icon-start" color="primary" size="m"></gov-icon>
</gov-button>
</gov-flex>
</gov-flex>
<form role="search" id="search" class="gov-search gov-search--fixed-width">
<gov-form-control>
<gov-form-search size="m" color="neutral" aria-autocomplete="list" aria-haspopup="menu" aria-controls="suggestions" aria-expanded="true">
<gov-form-input slot="input" size="m" placeholder="Hledejte v názvu, obsahu..." aria-label="Vyhledávání v obsahu webu" input-type="search">
<gov-icon type="templates" name="search" slot="icon-start"></gov-icon>
</gov-form-input>
<gov-button color="neutral" size="s" type="base" aria-label="Odstranit zadaný výraz" slot="button">
<gov-icon type="templates" name="x" slot="icon-start"></gov-icon>
</gov-button>
<gov-button color="primary" size="s" type="solid" aria-label="Vyhledat zadaný výraz" native-type="submit" slot="button">
<gov-icon type="templates" name="search" slot="icon-start"></gov-icon>
</gov-button>
</gov-form-search>
</gov-form-control>
</form>
<gov-flex class="gov-header__action" justify-content="space-between" align-items="center" gap="m">
<gov-button color="primary" size="m" type="solid" aria-label="Přihlášení do klientské zóny">
Přihlásit se
</gov-button>
<gov-button color="primary" size="m" type="base" aria-label="Click to change language to English">
<gov-icon type="templates" name="flag" slot="icon-start"></gov-icon>
English
</gov-button>
<gov-theme-switch size="m" aria-label="Přepínač barevného schématu stránky"></gov-theme-switch>
</gov-flex>
</div>
</div>
<div class="gov-header__navigation js-gov-header__navigation">
<nav class="gov-navigation" aria-label="Hlavní navigace" id="main-navigation">
<ul>
<li class="gov-navigation--has-megamenu">
<gov-button type="base" color="primary" size="l" aria-expanded="false" aria-controls="subnav0" aria-label="Úřad">
Úřad
<gov-icon slot="icon-end" type="templates" name="chevron-down" size="l"></gov-icon>
</gov-button>
<ul class="gov-mega-menu" id="megamenu0" hidden aria-hidden="true">
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li class="gov-mega-menu__more"><a href="#">+ Další</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li class="gov-mega-menu__more"><a href="#">+ Další</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li class="gov-mega-menu__more"><a href="#">+ Další</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li class="gov-mega-menu__more"><a href="#">+ Další</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Menu item</a>
</li>
<li>
<a href="#">Menu item</a>
</li>
<li>
<a href="#">Menu item</a>
</li>
<li>
<gov-button type="base" color="primary" size="l" aria-expanded="false" aria-controls="subnav4" aria-label="Tisk a média">
Tisk a média
<gov-icon slot="icon-end" type="templates" name="chevron-down" size="l"></gov-icon>
</gov-button>
<ul class="gov-subnavigation" id="subnav4" hidden aria-hidden="true">
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
<li>
<a href="#">Kontakty</a>
</li>
<li class="gov-mobile-only">
<gov-button color="primary" size="l" type="base" aria-label="Click to change language to English">
English
</gov-button>
</li>
<li class="gov-navigation__item gov-mobile-only">
<gov-theme-switch size="m" display-label="true"></gov-theme-switch>
</li>
</ul>
</nav>
</div>
</header>
<gov-container id="main">
<article>
<header class="gov-page-heading gov-mb--5xl">
<gov-flex direction="column" gap="l">
<gov-breadcrumbs aria-hidden="true">
<ul>
<li>
<a href="#">
Domů
</a>
</li>
<li>
<gov-icon type="components" name="chevron-right"></gov-icon>
<a href="#">
První úroveň
</a>
</li>
<li>
<gov-icon type="components" name="chevron-right"></gov-icon>
<a href="#">
Druhá úroveň
</a>
</li>
<li>
<gov-icon type="components" name="chevron-right"></gov-icon>
<strong>Nadpis článku</strong>
</li>
</ul>
</gov-breadcrumbs>
<gov-flex direction="column" gap="m">
<h1>Nadpis stránky</h1>
<gov-flex gap="m" justify-content="space-between" align-items="flex-end">
<gov-flex direction="column" gap="m">
<ul class="gov-icon-list gov-list--plain gov-icon-list--small gov-icon-list--grey">
<li>
<gov-flex align-items="center" gap="s" responsive="false">
<gov-icon type="templates" name="clock-history" alt="Datum publikace:" aria-label="Datum publikace"></gov-icon>
<time datetime="2024-11-26">Aktualizováno 26.11.2024</time>
</gov-flex>
</li>
<li>
<gov-flex align-items="center" gap="s" responsive="false">
<gov-icon type="templates" name="person" alt="Autor článku:" aria-label="Autor článku"></gov-icon>
<span>Jan Novotný</span>
</gov-flex>
</li>
</ul>
<ul class="gov-tags gov-list--plain">
<li>
<gov-tag color="primary" type="subtle" size="s">
<gov-icon type="templates" name="star-fill" slot="icon-start"></gov-icon>
Tag
</gov-tag>
</li>
<li>
<gov-tag color="primary" type="subtle" size="s">
<gov-icon type="templates" name="star-fill" slot="icon-start"></gov-icon>
Tag
</gov-tag>
</li>
<li>
<gov-tag color="primary" type="subtle" size="s">
<gov-icon type="templates" name="star-fill" slot="icon-start"></gov-icon>
Tag
</gov-tag>
</li>
</ul>
</gov-flex>
<nav aria-label="Možnosti sdílení článku">
<ul class="gov-social gov-list--plain">
<li>
<gov-button color="neutral" size="s" type="base" aria-label="Sdílet na Facebooku" target="_blank" rel="noreferrer nofollow" href="#" title="Sdílet na Facebooku">
<gov-icon type="templates" name="facebook" slot="icon-start" size="s"></gov-icon>
</gov-button>
</li>
<li>
<gov-button color="neutral" size="s" type="base" aria-label="Sdílet na síti X" target="_blank" rel="noreferrer nofollow" href="#" title="Sdílet na síti X">
<gov-icon type="templates" name="twitter-x" slot="icon-start" size="s"></gov-icon>
</gov-button>
</li>
<li>
<gov-button color="neutral" size="s" type="base" aria-label="Sdílet přes E-mail" target="_blank" rel="noreferrer nofollow" href="#" title="Sdílet přes E-mail">
<gov-icon type="templates" name="envelope" slot="icon-start" size="s"></gov-icon>
</gov-button>
</li>
<li>
<gov-button color="neutral" size="s" type="base" aria-label="Sdílet odkaz" target="_blank" rel="noreferrer nofollow" href="#" title="Sdílet odkaz">
<gov-icon type="templates" name="link" slot="icon-start" size="s"></gov-icon>
</gov-button>
</li>
</ul>
</nav>
</gov-flex>
</gov-flex>
<picture>
<source srcset="/assets/old-town-square.avif" type="image/avif">
<source srcset="/assets/old-town-square.webp" type="image/webp">
<img src="/assets/old-town-square.jpg" alt="Pohled na Staroměstské náměstí v Praze, Česká republika. Celá scéna je nasvícena slunečním světlem." width="1200" height="800" class=" gov-responsive-img" />
</picture>
<div class="gov-text-content">
<p class="gov-text--body-xl">Tato stránka poskytuje klíčové informace a zdroje k vybranému tématu. Ať už hledáte pokyny, dokumentaci nebo užitečné nástroje, zde najdete vše potřebné. Zůstaňte v obraze díky aktuálnímu obsahu.</p>
</div>
</gov-flex>
</header>
<gov-accordion size="m" class="gov-mobile-only gov-table-of-contents--accordion">
<gov-accordion-item>
<h3 id="a1" slot="label">Obsah článku</h3>
<ul class='gov-table-of-contents gov-list--plain'>
<li><a href='#nadpis0'>Article Heading H2</a></li>
<li><a href='#nadpis1'>Article Heading H2</a></li>
<li><a href='#nadpis2'>Article Heading H2</a></li>
<li><a href='#nadpis3'>Article Heading H2</a></li>
<li><a href='#nadpis4'>Article Heading H2</a></li>
</ul>
</gov-accordion-item>
</gov-accordion>
<gov-layout type="aside" variant="right">
<gov-layout-column class="gov-text-content">
<main>
<section aria-labelledby="nadpis0">
<h2 id="nadpis0">Article Heading H2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<gov-blockquote cite="https://example.com" type="subtle">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue.</p>
<img src="/assets/author.png" alt="" width="32" height="32" slot="image" />
<p slot="author">Confucius, <cite>Lorem sipsim</cite></p>
</gov-blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
</section>
<section aria-labelledby="nadpis1">
<h2 id="nadpis1">Article Heading H2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<h3 id="nadpis1-0">Article Heading H3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<h4 id="nadpis1-0-0">Article Heading H4</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<h3 id="nadpis1-1">Article Heading H3</h3>
<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
</section>
<section aria-labelledby="nadpis2">
<h2 id="nadpis2">Article Heading H2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<figure class="gov-image">
<picture>
<source srcset="/assets/man.avif" type="image/avif">
<source srcset="/assets/man.webp" type="image/webp">
<img src="/assets/man.jpg" alt="Muž sedí v kanceláři u stolu a telefonuje a směje se. Je připravený zapisovat si tužkou do bloku." width="800" height="533" />
</picture>
<figcaption>Curabitur vitae diam non enim vestibulum interdum. Nullam sapien sem, ornare ac, nonummy non</figcaption>
</figure>
</section>
<section aria-labelledby="nadpis3">
<h2 id="nadpis3">Article Heading H2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<h3 id="nadpis3-0">Article Heading H3</h3>
<gov-stepper size="m">
<gov-stepper-item color="primary">
<span slot="prefix">1</span>
<h3 slot="headline">Krok návodu</h3>
</gov-stepper-item>
<gov-stepper-item color="primary">
<span slot="prefix">2</span>
<h3 slot="headline">Krok návodu</h3>
</gov-stepper-item>
<gov-stepper-item color="primary">
<span slot="prefix">3</span>
<h3 slot="headline">Krok návodu</h3>
</gov-stepper-item>
<gov-stepper-item color="primary">
<span slot="prefix">4</span>
<h3 slot="headline">Krok návodu</h3>
</gov-stepper-item>
<gov-stepper-item color="primary">
<span slot="prefix">5</span>
<h3 slot="headline">Krok návodu</h3>
</gov-stepper-item>
</gov-stepper>
<h3 id="nadpis3-1">Article Heading H3</h3>
<gov-accordion size="m">
<gov-accordion-item>
<h4 slot="label">Accordion Label</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.</p>
</gov-accordion-item>
<gov-accordion-item>
<h4 slot="label">Accordion Label</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.</p>
</gov-accordion-item>
<gov-accordion-item>
<h4 slot="label">Accordion Label</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.</p>
</gov-accordion-item>
<gov-accordion-item>
<h4 slot="label">Accordion Label</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.</p>
</gov-accordion-item>
<gov-accordion-item>
<h4 slot="label">Accordion Label</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.</p>
</gov-accordion-item>
<gov-accordion-item>
<h4 slot="label">Accordion Label</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.</p>
</gov-accordion-item>
<gov-accordion-item>
<h4 slot="label">Accordion Label</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.</p>
</gov-accordion-item>
<gov-accordion-item>
<h4 slot="label">Accordion Label</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.</p>
</gov-accordion-item>
<gov-accordion-item>
<h4 slot="label">Accordion Label</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.</p>
</gov-accordion-item>
<gov-accordion-item>
<h4 slot="label">Accordion Label</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.</p>
</gov-accordion-item>
</gov-accordion>
</section>
<section aria-labelledby="nadpis4">
<h2 id="nadpis4">Article Heading H2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<div class="gov-gallery" aria-label="Fotogalerie">
<gov-grid gap="m">
<gov-grid-item col-span="12">
<a href="/assets/old-town-square.jpg">
<picture>
<source srcset="/assets/old-town-square.avif" type="image/avif">
<source srcset="/assets/old-town-square.webp" type="image/webp">
<img src="/assets/old-town-square.jpg" alt="Pohled na Staroměstské náměstí v Praze, Česká republika. Celá scéna je nasvícena slunečním světlem." width="800" height="533" />
</picture>
</a>
</gov-grid-item>
<gov-grid-item col-span="12" col-span-sm="3">
<a href="/assets/man.jpg">
<picture>
<source srcset="/assets/man.avif" type="image/avif">
<source srcset="/assets/man.webp" type="image/webp">
<img src="/assets/man.jpg" alt="Muž sedí v kanceláři u stolu a telefonuje a směje se. Je připravený zapisovat si tužkou do bloku." width="800" height="533" />
</picture>
</a>
</gov-grid-item>
<gov-grid-item col-span="12" col-span-sm="3">
<a href="/assets/documents.jpg">
<picture>
<source srcset="/assets/documents.avif" type="image/avif">
<source srcset="/assets/documents.webp" type="image/webp">
<img src="/assets/documents.jpg" alt="Větší stoh dokumentů, oddělených kancelářskými svorkami. V pozadí svítí slunce skrz žaluzie." width="800" height="533" />
</picture>
</a>
</gov-grid-item>
<gov-grid-item col-span="12" col-span-sm="3">
<a href="/assets/old-town-square.jpg">
<picture>
<source srcset="/assets/old-town-square.avif" type="image/avif">
<source srcset="/assets/old-town-square.webp" type="image/webp">
<img src="/assets/old-town-square.jpg" alt="Pohled na Staroměstské náměstí v Praze, Česká republika. Celá scéna je nasvícena slunečním světlem." width="800" height="533" />
</picture>
</a>
</gov-grid-item>
<gov-grid-item col-span="12" col-span-sm="3">
<a href="/assets/documents.jpg">
<span>59 dalších</span>
<picture>
<source srcset="/assets/documents.avif" type="image/avif">
<source srcset="/assets/documents.webp" type="image/webp">
<img src="/assets/documents.jpg" alt="Větší stoh dokumentů, oddělených kancelářskými svorkami. V pozadí svítí slunce skrz žaluzie." width="800" height="533" />
</picture>
</a>
</gov-grid-item>
</gov-grid>
</div>
</section>
</main>
</gov-layout-column>
<gov-layout-column class="gov-desktop-only">
<aside aria-label="">
<gov-flex direction="column" gap="m">
<h3 id="a1">Obsah článku</h3>
<nav aria-label="Obsah stránky">
<ul class="gov-table-of-contents gov-list--plain">
<li>
<a href="#nadpis0">Article Heading H2</a>
</li>
<li>
<a href="#nadpis1">Article Heading H2</a>
<ul>
<li>
<a href="#nadpis1-0">Article Heading H3</a>
<ul>
<li>
<a href="#nadpis1-0-0">Article Heading H4</a>
</li>
</ul>
</li>
<li>
<a href="#nadpis1-1">Article Heading H3</a>
</li>
</ul>
</li>
<li>
<a href="#nadpis2">Article Heading H2</a>
</li>
<li>
<a href="#nadpis3">Article Heading H2</a>
<ul>
<li>
<a href="#nadpis3-0">Article Heading H3</a>
</li>
<li>
<a href="#nadpis3-1">Article Heading H3</a>
</li>
</ul>
</li>
<li>
<a href="#nadpis4">Article Heading H2</a>
</li>
</ul>
</nav>
</gov-flex>
</aside>
</gov-layout-column>
</gov-layout>
</article>
</gov-container>
<footer class="gov-footer">
<gov-flex class="gov-footer__content" direction="column" justify-content="space-between" gap="3xl">
<gov-flex responsive="false">
<ul class="gov-footer__main gov-list--plain">
<li>
<nav aria-labelledby="nav1">
<h5 id="nav1">Title</h5>
<ul class="gov-list--plain">
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
</ul>
</nav>
</li>
<li>
<nav aria-labelledby="nav2">
<h5 id="nav2">Title</h5>
<ul class="gov-list--plain">
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
</ul>
</nav>
</li>
<li>
<nav aria-labelledby="nav3">
<h5 id="nav3">Title</h5>
<ul class="gov-list--plain">
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
</ul>
</nav>
</li>
<li>
<h5>Title</h5>
<gov-flex direction="column" gap="l">
<address>
<ul class="gov-footer__address gov-list--plain">
<li>Adresa 1</li>
<li>686 01 Praha</li>
<li>
<gov-link href="tel:+420789325678" size="s">
<gov-icon type="templates" name="telephone" slot="icon-start" alt="tel.:" aria-label="telefon"></gov-icon>
+420 789 325 678
</gov-link>
</li>
<li>
<gov-link href="mailto:loremipsum@email.com" size="s">
<gov-icon type="templates" name="envelope" slot="icon-start" alt="e-mail:" aria-label="e-mail"></gov-icon>
loremipsum@email.com
</gov-link>
</li>
</ul>
</address>
<nav aria-label="Odkazy na sociální sítě">
<ul class="gov-social gov-list--plain">
<li>
<gov-button color="primary" size="s" type="base" aria-label="Facebook" target="_blank" rel="noreferrer nofollow" href="#" title="Facebooku">
<gov-icon type="templates" name="facebook" slot="icon-start" size="s"></gov-icon>
</gov-button>
</li>
<li>
<gov-button color="primary" size="s" type="base" aria-label="Instagram" target="_blank" rel="noreferrer nofollow" href="#" title="Instagram">
<gov-icon type="templates" name="instagram" slot="icon-start" size="s"></gov-icon>
</gov-button>
</li>
<li>
<gov-button color="primary" size="s" type="base" aria-label="Youtube" target="_blank" rel="noreferrer nofollow" href="#" title="Youtube">
<gov-icon type="templates" name="youtube" slot="icon-start" size="s"></gov-icon>
</gov-button>
</li>
<li>
<gov-button color="primary" size="s" type="base" aria-label="Linkedin" target="_blank" rel="noreferrer nofollow" href="#" title="Linkedin">
<gov-icon type="templates" name="linkedin" slot="icon-start" size="s"></gov-icon>
</gov-button>
</li>
<li>
<gov-button color="primary" size="s" type="base" aria-label="Twitter X" target="_blank" rel="noreferrer nofollow" href="#" title="Twitter X">
<gov-icon type="templates" name="twitter-x" slot="icon-start" size="s"></gov-icon>
</gov-button>
</li>
</ul>
</nav>
</gov-flex>
</li>
</ul>
<gov-button color="primary" size="m" type="base" aria-label="Vrátit se na začátek stránky" class=" gov-footer__up js-gov-footer__up">
<gov-icon type="templates" name="arrow-up" slot="icon-start"></gov-icon>
</gov-button>
</gov-flex>
<gov-grid gap="l" class="gov-footer__logos-group">
<gov-grid-item col-span="12" col-span-lg="6">
<section>
<h5>Související loga</h5>
<ul class="gov-logos gov-list--plain">
<li>
<a href="https://www.dia.gov.cz/" aria-label="Otevřít stránky DIA" target="_blank" rel="noreferrer nofollow">
<svg width="78" height="35" xmlns="http://www.w3.org/2000/svg">
<image href="/assets/logos/logo-dia.svg" width="78" height="35"></image>
</svg>
</a>
</li>
<li>
<a href="https://nakit.cz/" aria-label="Otevřít stránky Nakit" target="_blank" rel="noreferrer nofollow">
<svg width="118" height="35" xmlns="http://www.w3.org/2000/svg">
<image href="/assets/logos/logo-nakit.svg" width="118" height="35"></image>
</svg>
</a>
</li>
<li>
<a href="https://next-generation-eu.europa.eu/index_cs" aria-label="Otevřít stránky Next Generation EU" target="_blank" rel="noreferrer nofollow">
<svg width="114" height="32" xmlns="http://www.w3.org/2000/svg">
<image href="/assets/logos/financovano-eu.svg" width="114" height="32"></image>
</svg>
</a>
</li>
<li>
<a href="https://www.planobnovycr.cz/" aria-label="Otevřít stránky Národní plán obnovy" target="_blank" rel="noreferrer nofollow">
<svg width="100" height="35" xmlns="http://www.w3.org/2000/svg">
<image href="/assets/logos/narodni-plan-obnovy.svg" width="100" height="35"></image>
</svg>
</a>
</li>
</ul>
</section>
</gov-grid-item>
<gov-grid-item col-span="12" col-span-lg="6">
<section>
<h5>Mobilní aplikace nebo jiná loga</h5>
<ul class="gov-logos gov-list--plain">
<li>
<a href="https://apps.apple.com/us/app/port%C3%A1l-ob%C4%8Dana/id6483367664" title="Přejít na Apple Store" aria-label="Přejít na Apple Store" target="_blank" rel="noreferrer nofollow">
</a>
</li>
<li>
<a href="https://play.google.com/store/apps/details?id=cz.gov.portal.v2.obcan" title="Přejít na Google Play" aria-label="Přejít na Google Play" target="_blank" rel="noreferrer nofollow">
</a>
</li>
</ul>
</section>
</gov-grid-item>
</gov-grid>
<gov-flex direction="column" gap="m-nudge">
<nav aria-label="Odkazy na právní dokumenty">
<ul class="gov-footer-links gov-list--plain">
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
<li><gov-link href="#" size="s">Link</gov-link></li>
</ul>
</nav>
<hr>
<gov-flex class="gov-footer-copy" justify-content="space-between" gap="m">
<p>2025 © Digitální a informační agentura • Informace jsou poskytovány v souladu se zákonem č. 106/1999 Sb., o svobodném přístupu k informacím.</p>
<div>
<gov-flex class="gov-footer__version" responsive="false">
<span>Verze 2.0.2105.9856</span>
<span>Využit Design system 4.2</span>
</gov-flex>
</div>
</gov-flex>
</gov-flex>
</gov-flex>
</footer>
{{ render '@header' }}
<gov-container id="main">
<article>
{{ render '@page-heading--complex' heading merge=true }}
{{ render '@table-of-contents--mobile' }}
<gov-layout type="aside" variant="right">
<gov-layout-column class="gov-text-content">
<main>
<section aria-labelledby="{{ heading-0/id }}">
{{ render '@heading' heading-0 }}
<p>{{ paragraph }}</p>
<p>{{ paragraph }}</p>
{{ render '@blockquote' }}
<p>{{ paragraph }}</p>
</section>
<section aria-labelledby="{{ heading-1/id }}">
{{ render '@heading' heading-1 }}
<p>{{ paragraph }}</p>
{{ render '@heading' heading-1-0 }}
<p>{{ paragraph }}</p>
{{ render '@heading' heading-1-0-0 }}
<p>{{ paragraph }}</p>
<p>{{ paragraph }}</p>
{{ render '@heading' heading-1-1 }}
<ol>
{{#each list-item}}
<li>{{ this }}</li>
{{/each}}
</ol>
</section>
<section aria-labelledby="{{ heading-2/id }}">
{{ render '@heading' heading-2 }}
<p>{{ paragraph }}</p>
<p>{{ paragraph }}</p>
{{ render '@gallery--image' }}
</section>
<section aria-labelledby="{{ heading-3/id }}">
{{ render '@heading' heading-3 }}
<p>{{ paragraph }}</p>
{{ render '@heading' heading-3-0 }}
{{ render '@stepper' stepper }}
{{ render '@heading' heading-3-1 }}
{{ render '@accordion' accordion }}
</section>
<section aria-labelledby="{{ heading-4/id }}">
{{ render '@heading' heading-4 }}
<p>{{ paragraph }}</p>
{{ render '@gallery' }}
</section>
</main>
</gov-layout-column>
<gov-layout-column class="gov-desktop-only">
<aside aria-label="{{ table-of-contents/aria-label }}">
<gov-flex direction="column" gap="m">
{{ render '@table-of-contents' table-of-contents merge=true }}
</gov-flex>
</aside>
</gov-layout-column>
</gov-layout>
</article>
</gov-container>
{{ render '@footer' }}
{
"heading": {
"name": "Nadpis článku",
"classes": [
"gov-mb--5xl"
]
},
"heading-0": {
"tag": "h2",
"name": "Article Heading H2",
"id": "nadpis0"
},
"heading-1": {
"tag": "h2",
"name": "Article Heading H2",
"id": "nadpis1"
},
"heading-1-0": {
"tag": "h3",
"name": "Article Heading H3",
"id": "nadpis1-0"
},
"heading-1-0-0": {
"tag": "h4",
"name": "Article Heading H4",
"id": "nadpis1-0-0"
},
"heading-1-1": {
"tag": "h3",
"name": "Article Heading H3",
"id": "nadpis1-1"
},
"heading-2": {
"tag": "h2",
"name": "Article Heading H2",
"id": "nadpis2"
},
"heading-3": {
"tag": "h2",
"name": "Article Heading H2",
"id": "nadpis3"
},
"heading-3-0": {
"tag": "h3",
"name": "Article Heading H3",
"id": "nadpis3-0"
},
"heading-3-1": {
"tag": "h3",
"name": "Article Heading H3",
"id": "nadpis3-1"
},
"heading-4": {
"tag": "h2",
"name": "Article Heading H2",
"id": "nadpis4"
},
"headline-h4": "Article Heading H4",
"paragraph": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.",
"list-item": [
"List item",
"List item",
"List item",
"List item",
"List item"
],
"stepper": {
"size": "m",
"stepper": [
{
"color": "primary",
"prefix": "1",
"heading": {
"slot": "headline",
"tag": "h3",
"name": "Krok návodu"
}
},
{
"color": "primary",
"prefix": "2",
"heading": {
"slot": "headline",
"tag": "h3",
"name": "Krok návodu"
}
},
{
"color": "primary",
"prefix": "3",
"heading": {
"slot": "headline",
"tag": "h3",
"name": "Krok návodu"
}
},
{
"color": "primary",
"prefix": "4",
"heading": {
"slot": "headline",
"tag": "h3",
"name": "Krok návodu"
}
},
{
"color": "primary",
"prefix": "5",
"heading": {
"slot": "headline",
"tag": "h3",
"name": "Krok návodu"
}
}
]
},
"accordion": {
"size": "m",
"accordion": [
{
"title": "Accordion Label",
"tag": "h4",
"content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu."
},
{
"title": "Accordion Label",
"tag": "h4",
"content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu."
},
{
"title": "Accordion Label",
"tag": "h4",
"content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu."
},
{
"title": "Accordion Label",
"tag": "h4",
"content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu."
},
{
"title": "Accordion Label",
"tag": "h4",
"content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu."
},
{
"title": "Accordion Label",
"tag": "h4",
"content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu."
},
{
"title": "Accordion Label",
"tag": "h4",
"content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu."
},
{
"title": "Accordion Label",
"tag": "h4",
"content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu."
},
{
"title": "Accordion Label",
"tag": "h4",
"content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu."
},
{
"title": "Accordion Label",
"tag": "h4",
"content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu."
}
]
}
}
No notes defined.