<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>
<div class="gov-gallery"{{#if aria-label}} aria-label="{{ aria-label }}"{{/if}}>
<gov-grid gap="m">
<gov-grid-item col-span="12">
<a href="{{ gallery-preview/src }}.jpg">
{{ render '@picture' gallery-preview }}
</a>
</gov-grid-item>
{{#each gallery}}
<gov-grid-item col-span="12" col-span-sm="3">
<a href="{{ src }}.jpg">
{{#if more}}
<span>{{ more }}</span>
{{/if}}
{{ render '@picture' this }}
</a>
</gov-grid-item>
{{/each}}
</gov-grid>
</div>
{
"aria-label": "Fotogalerie",
"src": "/assets/man",
"alt": "Muž sedí v kanceláři u stolu a telefonuje a směje se. Je připravený zapisovat si tužkou do bloku.",
"more": "59 dalších",
"width": "800",
"height": "533",
"figcaption": "Curabitur vitae diam non enim vestibulum interdum. Nullam sapien sem, ornare ac, nonummy non",
"gallery-preview": {
"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": "800",
"height": "533"
},
"gallery": [
{
"src": "/assets/man",
"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"
},
{
"src": "/assets/documents",
"alt": "Větší stoh dokumentů, oddělených kancelářskými svorkami. V pozadí svítí slunce skrz žaluzie.",
"width": "800",
"height": "533"
},
{
"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": "800",
"height": "533"
},
{
"src": "/assets/documents",
"alt": "Větší stoh dokumentů, oddělených kancelářskými svorkami. V pozadí svítí slunce skrz žaluzie.",
"width": "800",
"height": "533",
"more": "59 dalších"
}
]
}
@import "../../../styles/mixins";
.gov-gallery {
max-width: 50rem;
gov-grid-item {
overflow: hidden;
border-radius: var(--corner-radius-s);
}
a {
position: relative;
display: block;
}
a:focus-visible {
outline: none;
&:before {
content: "";
position: absolute;
z-index: 2;
inset: 0;
border: var(--outline-offset) solid var(--status-focus);
border-radius: var(--corner-radius-s);
}
}
img {
display: block;
max-width: 100%;
min-width: 100%;
height: auto;
}
&__overlay {
position: relative;
display: block;
width: fit-content;
height: fit-content;
}
& .gov-gallery__overlay {
width: 100%;
height: 100%;
}
a span,
&__overlay > a span {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
@include flex($align: center, $justify: center);
background-color: var(--background-overlay-image);
@include typography("body-m-bold");
color: var(--text-white-fixed);
border-radius: var(--corner-radius-s);
}
@include mq($from: sm) {
gov-grid-item:not(:first-child) {
img {
aspect-ratio: 1;
object-fit: cover;
}
}
}
}
figure.gov-image {
@include flex($direction: column, $gap: var(--templates-margin-s));
img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--corner-radius-s);
}
figcaption {
@include typography("body-s");
font-style: italic;
color: var(--text-primary);
}
a {
@include flex($direction: column, $gap: var(--templates-margin-s));
text-decoration: none;
}
}
No notes defined.