<gov-banner size="l" background="waves" foreground="image" aria-labelledby="banner">
<h1 id="banner" slot="headline">Data, která tvoří budoucnost</h1>
<p>Statistiky, analýzy a přehledy, které pomáhají rozvíjet Českou republiku.</p>
<gov-button color="secondary" size="l" type="solid" aria-label="Zjistit více o datech, která tvoří budoucnost" class=" gov-button--mobile-expanded" href="#" slot="button">
Zjistit více
</gov-button>
<picture slot="image">
<source srcset="/assets/banner/image-l.avif" type="image/avif">
<source srcset="/assets/banner/image-l.webp" type="image/webp">
<img src="/assets/banner/image-l.jpg" alt="" width="537" height="360" />
</picture>
</gov-banner>
<gov-banner size="{{ size }}"
{{#if background}} background="{{ background }}"{{/if}}
{{#if foreground}} foreground="{{ foreground }}"{{/if}}
{{#if text-color}} text-color="{{ text-color }}"{{/if}}
{{#if heading/id}} aria-labelledby="{{ heading/id }}"{{/if}}
{{#if classes}} class="{{#each classes}} {{ this }}{{/each}}"{{/if}}>
{{ render '@heading' heading }}
{{#if text}}
<p>{{ text }}</p>
{{/if}}
{{#if button}}
{{ render '@button' button }}
{{/if}}
{{#if image}}
{{> @picture image }}
{{/if}}
</gov-banner>
{
"heading": {
"slot": "headline",
"tag": "h1",
"name": "Data, která tvoří budoucnost",
"id": "banner"
},
"text": "Statistiky, analýzy a přehledy, které pomáhají rozvíjet Českou republiku.",
"size": "l",
"background": "waves",
"foreground": "image",
"button": {
"slot": "button",
"text": "Zjistit více",
"aria-label": "Zjistit více o datech, která tvoří budoucnost",
"color": "secondary",
"type": "solid",
"size": "l",
"href": "#",
"classes": [
"gov-button--mobile-expanded"
]
},
"image": {
"slot": "image",
"src": "/assets/banner/image-l",
"width": "537",
"height": "360",
"alt": ""
}
}
No notes defined.