<div class="logo-wall">
<div class="logo-wall__inner">
<div class="logo-wall__headline">
<h2 class="headline headline--module-2">Unsere Partner</h2>
</div>
<div class="logo-wall__logos"><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
<picture>
<source srcset="https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/160/80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="160" height="80" loading="lazy" />
</picture>
</a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
<picture>
<source srcset="https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/160/80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="160" height="80" loading="lazy" />
</picture>
</a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
<picture>
<source srcset="https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/160/80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="160" height="80" loading="lazy" />
</picture>
</a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
<picture>
<source srcset="https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/160/80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="160" height="80" loading="lazy" />
</picture>
</a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
<picture>
<source srcset="https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/160/80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="160" height="80" loading="lazy" />
</picture>
</a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
<picture>
<source srcset="https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/160/80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="160" height="80" loading="lazy" />
</picture>
</a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
<picture>
<source srcset="https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/160/80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="160" height="80" loading="lazy" />
</picture>
</a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
<picture>
<source srcset="https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/160/80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="160" height="80" loading="lazy" />
</picture>
</a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
<picture>
<source srcset="https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/160/80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="160" height="80" loading="lazy" />
</picture>
</a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
<picture>
<source srcset="https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/160/80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="160" height="80" loading="lazy" />
</picture>
</a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
<picture>
<source srcset="https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/160/80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="160" height="80" loading="lazy" />
</picture>
</a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
<picture>
<source srcset="https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/160/80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="160" height="80" loading="lazy" />
</picture>
</a></div>
</div>
</div>
//- Render logo-wall
#{tag || 'div'}.logo-wall(
class=classNames(
isSingle && 'logo-wall--single'
)
)&attributes(attr)
.logo-wall__inner
if headline
.logo-wall__headline
+include('@headline--module-2', { text: headline })
.logo-wall__logos
each item in items
a.logo-wall__item(href=item.href, title=item.title, target=item.target)
+include('@picture', item.picture)
{
"headline": "Unsere Partner",
"items": [
{
"href": "#",
"target": "_blank",
"title": "Lorem ipsum dolor",
"picture": {
"src": null,
"width": 160,
"height": 80,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp",
"type": "webp",
"breakpoint": null
}
]
}
},
{
"href": "#",
"target": "_blank",
"title": "Lorem ipsum dolor",
"picture": {
"src": null,
"width": 160,
"height": 80,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp",
"type": "webp",
"breakpoint": null
}
]
}
},
{
"href": "#",
"target": "_blank",
"title": "Lorem ipsum dolor",
"picture": {
"src": null,
"width": 160,
"height": 80,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp",
"type": "webp",
"breakpoint": null
}
]
}
},
{
"href": "#",
"target": "_blank",
"title": "Lorem ipsum dolor",
"picture": {
"src": null,
"width": 160,
"height": 80,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp",
"type": "webp",
"breakpoint": null
}
]
}
},
{
"href": "#",
"target": "_blank",
"title": "Lorem ipsum dolor",
"picture": {
"src": null,
"width": 160,
"height": 80,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp",
"type": "webp",
"breakpoint": null
}
]
}
},
{
"href": "#",
"target": "_blank",
"title": "Lorem ipsum dolor",
"picture": {
"src": null,
"width": 160,
"height": 80,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp",
"type": "webp",
"breakpoint": null
}
]
}
},
{
"href": "#",
"target": "_blank",
"title": "Lorem ipsum dolor",
"picture": {
"src": null,
"width": 160,
"height": 80,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp",
"type": "webp",
"breakpoint": null
}
]
}
},
{
"href": "#",
"target": "_blank",
"title": "Lorem ipsum dolor",
"picture": {
"src": null,
"width": 160,
"height": 80,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp",
"type": "webp",
"breakpoint": null
}
]
}
},
{
"href": "#",
"target": "_blank",
"title": "Lorem ipsum dolor",
"picture": {
"src": null,
"width": 160,
"height": 80,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp",
"type": "webp",
"breakpoint": null
}
]
}
},
{
"href": "#",
"target": "_blank",
"title": "Lorem ipsum dolor",
"picture": {
"src": null,
"width": 160,
"height": 80,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp",
"type": "webp",
"breakpoint": null
}
]
}
},
{
"href": "#",
"target": "_blank",
"title": "Lorem ipsum dolor",
"picture": {
"src": null,
"width": 160,
"height": 80,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp",
"type": "webp",
"breakpoint": null
}
]
}
},
{
"href": "#",
"target": "_blank",
"title": "Lorem ipsum dolor",
"picture": {
"src": null,
"width": 160,
"height": 80,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/160x80/A0A0A6/FFFFFF.webp?text=160x80-webp",
"type": "webp",
"breakpoint": null
}
]
}
}
]
}
.logo-wall {
background: #fff;
position: relative;
}
.logo-wall__inner {
position: relative;
z-index: 1;
}
.logo-wall__headline {
margin-bottom: 5rem;
text-align: center;
@include mq($from: m) {
margin-bottom: 8rem;
}
}
.logo-wall__logos {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -3rem;
@include mq($from: m) {
margin: -4rem -3rem;
}
}
.logo-wall__item {
display: inline-block;
margin: 3rem;
@include mq($from: m) {
margin: 4rem 3rem;
}
}
.logo-wall__item img {
height: 8rem;
object-fit: contain;
width: 16rem;
.logo-wall--single & {
height: 8rem;
width: 24rem;
}
}
default: 160 * 80, ratio 2 / 1