<div class="logo-wall">
<a class="logo-wall__logo" href="#">
<img src="https://bildermangel.de/170x50/fe7c09/130f26.webp" width="85" height="25" alt="" role="presentation" class="logo-wall__logo-image" loading="lazy">
</a>
<a class="logo-wall__logo" href="#">
<img src="https://bildermangel.de/170x50/fe7c09/130f26.webp" width="85" height="25" alt="" role="presentation" class="logo-wall__logo-image" loading="lazy">
</a>
<div class="logo-wall__logo">
<img src="https://bildermangel.de/82x100/fe7c09/130f26.webp" width="41" height="50" alt="" role="presentation" class="logo-wall__logo-image" loading="lazy">
</div>
<a class="logo-wall__logo" href="#">
<img src="https://bildermangel.de/170x50/fe7c09/130f26.webp" width="85" height="25" alt="" role="presentation" class="logo-wall__logo-image" loading="lazy">
</a>
<div class="logo-wall__logo">
<img src="https://bildermangel.de/170x50/fe7c09/130f26.webp" width="85" height="25" alt="" role="presentation" class="logo-wall__logo-image" loading="lazy">
</div>
<a class="logo-wall__logo" href="#">
<img src="https://bildermangel.de/82x100/fe7c09/130f26.webp" width="41" height="50" alt="" role="presentation" class="logo-wall__logo-image" loading="lazy">
</a>
<a class="logo-wall__logo" href="#">
<img src="https://bildermangel.de/170x50/fe7c09/130f26.webp" width="85" height="25" alt="" role="presentation" class="logo-wall__logo-image" loading="lazy">
</a>
<a class="logo-wall__logo" href="#">
<img src="https://bildermangel.de/170x50/fe7c09/130f26.webp" width="85" height="25" alt="" role="presentation" class="logo-wall__logo-image" loading="lazy">
</a>
<div class="logo-wall__logo">
<img src="https://bildermangel.de/82x100/fe7c09/130f26.webp" width="41" height="50" alt="" role="presentation" class="logo-wall__logo-image" loading="lazy">
</div>
<div class="logo-wall__logo">
<img src="https://bildermangel.de/82x100/fe7c09/130f26.webp" width="41" height="50" alt="" role="presentation" class="logo-wall__logo-image" loading="lazy">
</div>
</div>
<div {{ html_attributes({
id: id ?? false,
class: 'logo-wall',
}, attrs ?? {}) }}>
{% for logo in logos %}
{% set link = logo.link ?? false %}
{% set tag = link ? 'a' : 'div' %}
<{{ tag }} {{ html_attributes({
class: 'logo-wall__logo',
href: link,
title: logo.text ?? false,
}, link_attributes(link), logo.attrs ?? {}) }}>
<img {{ html_attributes({
src: logo.image.src,
srcset: logo.image.srcset ?? false,
width: logo.image.width ?? false,
height: logo.image.height ?? false,
alt: '',
role: 'presentation',
class: 'logo-wall__logo-image',
loading: 'lazy',
}) }}>
</{{ tag }}>
{% endfor %}
</div>
{
"logos": [
{
"image": {
"src": "https://bildermangel.de/170x50/fe7c09/130f26.webp",
"width": 85,
"height": 25,
"alt": "Partnerlogo"
},
"link": "#"
},
{
"image": {
"src": "https://bildermangel.de/170x50/fe7c09/130f26.webp",
"width": 85,
"height": 25,
"alt": "Partnerlogo"
},
"link": "#"
},
{
"image": {
"src": "https://bildermangel.de/82x100/fe7c09/130f26.webp",
"width": 41,
"height": 50,
"alt": "Partnerlogo"
}
},
{
"image": {
"src": "https://bildermangel.de/170x50/fe7c09/130f26.webp",
"width": 85,
"height": 25,
"alt": "Partnerlogo"
},
"link": "#"
},
{
"image": {
"src": "https://bildermangel.de/170x50/fe7c09/130f26.webp",
"width": 85,
"height": 25,
"alt": "Partnerlogo"
}
},
{
"image": {
"src": "https://bildermangel.de/82x100/fe7c09/130f26.webp",
"width": 41,
"height": 50,
"alt": "Partnerlogo"
},
"link": "#"
},
{
"image": {
"src": "https://bildermangel.de/170x50/fe7c09/130f26.webp",
"width": 85,
"height": 25,
"alt": "Partnerlogo"
},
"link": "#"
},
{
"image": {
"src": "https://bildermangel.de/170x50/fe7c09/130f26.webp",
"width": 85,
"height": 25,
"alt": "Partnerlogo"
},
"link": "#"
},
{
"image": {
"src": "https://bildermangel.de/82x100/fe7c09/130f26.webp",
"width": 41,
"height": 50,
"alt": "Partnerlogo"
}
},
{
"image": {
"src": "https://bildermangel.de/82x100/fe7c09/130f26.webp",
"width": 41,
"height": 50,
"alt": "Partnerlogo"
},
"link": false
}
]
}
:root {
--logo-wall-gap: var(--gap);
--logo-wall-logo-padding: 2rem;
--logo-wall-logo-background-color: var(--color-white);
@include use-responsive-sizing(--logo-wall-logo-width, (
xs: 14rem,
s: 16rem,
l: 19rem,
));
}
.logo-wall {
display: grid;
grid-gap: var(--logo-wall-gap);
grid-template-columns: repeat(auto-fill, minmax(var(--logo-wall-logo-width), 1fr));
inline-size: 100%;
}
.logo-wall__logo {
align-items: center;
background-color: var(--logo-wall-logo-background-color);
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--logo-wall-logo-padding);
transition-property: transform;
&:any-link:is(:hover:not([disabled]), :focus:not(.has-invisible-focus)) {
transform: scale(1.1);
}
}
.logo-wall__logo-image {
aspect-ratio: 3 / 2;
block-size: auto;
inline-size: 100%;
object-fit: contain;
}
No notes defined.