<header class="gov-page-heading">
<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>
<header class="gov-page-heading{{#if classes}}{{#each classes}} {{ this }}{{/each}}{{/if}}">
<gov-flex direction="column" gap="l">
{{ render '@breadcrumbs' }}
<gov-flex direction="column" gap="m">
{{ render '@heading' heading }}
<gov-flex gap="m" justify-content="space-between" align-items="flex-end">
<gov-flex direction="column" gap="m">
{{ render '@icon-list' info }}
{{#if tags}}
{{render '@tags' tags }}
{{/if}}
</gov-flex>
{{#if social }}
{{ render '@social' }}
{{/if}}
</gov-flex>
</gov-flex>
{{#if image}}
{{> @picture image }}
{{/if}}
{{#if annotation}}
<div class="gov-text-content">
<p class="gov-text--body-xl">{{ annotation }}</p>
</div>
{{/if}}
</gov-flex>
</header>
{
"heading": {
"tag": "h1",
"name": "Nadpis stránky"
},
"annotation": "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.",
"info": {
"classes": [
"gov-icon-list--small",
"gov-icon-list--grey"
],
"item": [
{
"updated-text": "Aktualizováno",
"updated": "26.11.2024",
"icon": {
"type": "templates",
"name": "clock-history",
"aria-label": "Datum publikace",
"alt": "Datum publikace:"
}
},
{
"text": "Jan Novotný",
"icon": {
"type": "templates",
"name": "person",
"aria-label": "Autor článku",
"alt": "Autor článku:"
}
}
]
},
"tags": {
"type": "subtle",
"tag": [
{
"name": "Tag",
"color": "primary",
"type": "subtle",
"size": "s",
"icon-start": {
"slot": "icon-start",
"type": "templates",
"name": "star-fill"
}
},
{
"name": "Tag",
"color": "primary",
"type": "subtle",
"size": "s",
"icon-start": {
"slot": "icon-start",
"type": "templates",
"name": "star-fill"
}
},
{
"name": "Tag",
"color": "primary",
"type": "subtle",
"size": "s",
"icon-start": {
"slot": "icon-start",
"type": "templates",
"name": "star-fill"
}
}
]
},
"social": true,
"image": {
"src": "/assets/old-town-square",
"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",
"classes": [
"gov-responsive-img"
]
}
}
@import "../../../styles/mixins";
.gov-page-heading {
h1 {
@include typography("headline-xl");
}
&__annotation {
font-weight: 500;
}
&__social {
@include flex();
}
}
No notes defined.