<gov-grid gap="l" class="gov-card-grid">
<gov-grid-item col-span="12" col-span-lg="6" row-span="2">
<article>
<gov-card direction="vertical" aria-labelledby="card1">
<picture slot="img">
<source srcset="/assets/documents.avif" type="image/avif">
<source srcset="/assets/documents.webp" type="image/webp">
<img src="/assets/documents.jpg" alt="" width="800" height="533" />
</picture>
<gov-flex gap="s" direction="column">
<header>
<gov-flex gap="s" direction="column">
<h3 id="card1" class=" gov-card__headline">Název</h3>
<gov-flex gap="s" align-items="center" responsive="false">
<gov-icon type="templates" name="calendar-event" size="m" color="default"></gov-icon>
<time datetime="2025-03-14" class="gov-card__note">14.03.2025</time>
</gov-flex>
</gov-flex>
</header>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis. Integer vulputate sem a nibh rutrum consequat.</p>
<div class="gov-button-group">
<gov-button color="primary" size="s" type="solid">
Button
</gov-button> <gov-button color="primary" size="s" type="outlined">
Button
</gov-button>
</div>
</gov-flex>
</gov-card>
</article>
</gov-grid-item>
<gov-grid-item col-span="12" col-span-lg="6">
<article>
<gov-card direction="horizontal" aria-labelledby="card2">
<picture slot="img">
<source srcset="/assets/documents.avif" type="image/avif">
<source srcset="/assets/documents.webp" type="image/webp">
<img src="/assets/documents.jpg" alt="" width="800" height="533" />
</picture>
<gov-flex gap="s" direction="column">
<header>
<gov-flex gap="s" direction="column">
<h3 id="card2" class=" gov-card__headline">Název</h3>
<gov-flex gap="s" align-items="center" responsive="false">
<gov-icon type="templates" name="calendar-event" size="m" color="default"></gov-icon>
<time datetime="2025-03-14" class="gov-card__note">14.03.2025</time>
</gov-flex>
</gov-flex>
</header>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis. Integer vulputate sem a nibh rutrum consequat.</p>
<div class="gov-button-group">
<gov-button color="primary" size="s" type="solid">
Button
</gov-button> <gov-button color="primary" size="s" type="outlined">
Button
</gov-button>
</div>
</gov-flex>
</gov-card>
</article>
</gov-grid-item>
<gov-grid-item col-span="12" col-span-lg="6">
<article>
<gov-card direction="horizontal" aria-labelledby="card3">
<picture slot="img">
<source srcset="/assets/documents.avif" type="image/avif">
<source srcset="/assets/documents.webp" type="image/webp">
<img src="/assets/documents.jpg" alt="" width="800" height="533" />
</picture>
<gov-flex gap="s" direction="column">
<header>
<gov-flex gap="s" direction="column">
<h3 id="card3" class=" gov-card__headline">Název</h3>
<gov-flex gap="s" align-items="center" responsive="false">
<gov-icon type="templates" name="calendar-event" size="m" color="default"></gov-icon>
<time datetime="2025-03-14" class="gov-card__note">14.03.2025</time>
</gov-flex>
</gov-flex>
</header>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis. Integer vulputate sem a nibh rutrum consequat.</p>
<div class="gov-button-group">
<gov-button color="primary" size="s" type="solid">
Button
</gov-button> <gov-button color="primary" size="s" type="outlined">
Button
</gov-button>
</div>
</gov-flex>
</gov-card>
</article>
</gov-grid-item>
</gov-grid>
<gov-grid gap="l" class="gov-card-grid{{#if classes}}{{#each classes}} {{ this }}{{/each}}{{/if}}">
{{#each card}}
<gov-grid-item
{{#if col-span/default}}col-span="{{ col-span/default }}"{{/if}}
{{#if col-span/sm}}col-span-sm="{{ col-span/sm }}"{{/if}}
{{#if col-span/md}}col-span-md="{{ col-span/md }}"{{/if}}
{{#if col-span/lg}}col-span-lg="{{ col-span/lg }}"{{/if}}
{{#if col-span/xl}}col-span-xl="{{ col-span/xl }}"{{/if}}
{{#if row-span/default}}row-span="{{ row-span/default }}"{{/if}}
{{#if row-span/sm}}row-span-sm="{{ row-span/sm }}"{{/if}}
{{#if row-span/md}}row-span-md="{{ row-span/md }}"{{/if}}
{{#if row-span/lg}}row-span-lg="{{ row-span/lg }}"{{/if}}
{{#if row-span/xl}}row-span-xl="{{ row-span/xl }}"{{/if}}>
<article>
{{> @card-default this }}
</article>
</gov-grid-item>
{{/each}}
</gov-grid>
{
"card": [
{
"heading": {
"tag": "h3",
"name": "Název",
"id": "card1",
"classes": [
"gov-card__headline"
]
},
"release": "14.03.2025",
"text": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis. Integer vulputate sem a nibh rutrum consequat.</p>",
"image": {
"slot": "img",
"src": "/assets/documents",
"alt": "",
"width": "800",
"height": "533"
},
"button": [
{
"text": "Button",
"color": "primary",
"type": "solid",
"size": "s"
},
{
"text": "Button",
"color": "primary",
"type": "outlined",
"size": "s"
}
],
"direction": "vertical",
"col-span": {
"default": "12",
"lg": "6"
},
"row-span": {
"default": "2"
}
},
{
"heading": {
"tag": "h3",
"name": "Název",
"id": "card2",
"classes": [
"gov-card__headline"
]
},
"release": "14.03.2025",
"text": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis. Integer vulputate sem a nibh rutrum consequat.</p>",
"image": {
"slot": "img",
"src": "/assets/documents",
"alt": "",
"width": "800",
"height": "533"
},
"button": [
{
"text": "Button",
"color": "primary",
"type": "solid",
"size": "s"
},
{
"text": "Button",
"color": "primary",
"type": "outlined",
"size": "s"
}
],
"direction": "horizontal",
"col-span": {
"default": "12",
"lg": "6"
}
},
{
"heading": {
"tag": "h3",
"name": "Název",
"id": "card3",
"classes": [
"gov-card__headline"
]
},
"release": "14.03.2025",
"text": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis. Integer vulputate sem a nibh rutrum consequat.</p>",
"image": {
"slot": "img",
"src": "/assets/documents",
"alt": "",
"width": "800",
"height": "533"
},
"button": [
{
"text": "Button",
"color": "primary",
"type": "solid",
"size": "s"
},
{
"text": "Button",
"color": "primary",
"type": "outlined",
"size": "s"
}
],
"direction": "horizontal",
"col-span": {
"default": "12",
"lg": "6"
}
}
],
"card-horizontal": [
{
"heading": {
"tag": "h3",
"name": "Název",
"id": "card1",
"classes": [
"gov-card__headline"
]
},
"release": "14.03.2025",
"text": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis. Integer vulputate sem a nibh rutrum consequat.</p>",
"image": {
"slot": "img",
"src": "/assets/documents",
"alt": "",
"width": "800",
"height": "533"
},
"direction": "horizontal",
"col-span": {
"default": "12"
}
},
{
"heading": {
"tag": "h3",
"name": "Název",
"id": "card2",
"classes": [
"gov-card__headline"
]
},
"release": "14.03.2025",
"text": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis. Integer vulputate sem a nibh rutrum consequat.</p>",
"image": {
"slot": "img",
"src": "/assets/documents",
"alt": "",
"width": "800",
"height": "533"
},
"direction": "horizontal",
"col-span": {
"default": "12"
}
},
{
"heading": {
"tag": "h3",
"name": "Název",
"id": "card3",
"classes": [
"gov-card__headline"
]
},
"release": "14.03.2025",
"text": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis. Integer vulputate sem a nibh rutrum consequat.</p>",
"image": {
"slot": "img",
"src": "/assets/documents",
"alt": "",
"width": "800",
"height": "533"
},
"direction": "horizontal",
"col-span": {
"default": "12"
}
}
],
"card-vertical": [
{
"heading": {
"tag": "h3",
"name": "Název",
"id": "card1",
"classes": [
"gov-card__headline"
]
},
"release": "14.03.2025",
"text": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis. Integer vulputate sem a nibh rutrum consequat.</p>",
"image": {
"slot": "img",
"src": "/assets/documents",
"alt": "",
"width": "800",
"height": "533"
},
"direction": "vertical",
"col-span": {
"default": "12",
"lg": "3"
}
},
{
"heading": {
"tag": "h3",
"name": "Název",
"id": "card2",
"classes": [
"gov-card__headline"
]
},
"release": "14.03.2025",
"text": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis. Integer vulputate sem a nibh rutrum consequat.</p>",
"image": {
"slot": "img",
"src": "/assets/documents",
"alt": "",
"width": "800",
"height": "533"
},
"direction": "vertical",
"col-span": {
"default": "12",
"lg": "3"
}
},
{
"heading": {
"tag": "h3",
"name": "Název",
"id": "card3",
"classes": [
"gov-card__headline"
]
},
"release": "14.03.2025",
"text": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis. Integer vulputate sem a nibh rutrum consequat.</p>",
"image": {
"slot": "img",
"src": "/assets/documents",
"alt": "",
"width": "800",
"height": "533"
},
"direction": "vertical",
"col-span": {
"default": "12",
"lg": "3"
}
}
]
}
@import "../../../../styles/mixins";
.gov-card-grid {
container-type: inline-size;
&--space-between {
height: 100%;
}
article {
height: 100%;
}
}
No notes defined.