<div class="two-cards">
<div class="two-cards__headline">
<h2 class="headline headline--module-2">Weitere Themen</h2>
</div>
<div class="two-cards__inner">
<div class="two-cards__item"><a class="card" href="#">
<div class="card__image">
<picture>
<source srcset="https://placehold.co/540x540/A0A0A6/FFFFFF.webp?text=595x595-webp" type="image/webp" media="(min-width:64em)" />
<source srcset="https://placehold.co/595x595/A0A0A6/FFFFFF.jpg?text=595x595-jpg" type="image/jpg" media="(min-width:64em)" />
<source srcset="https://placehold.co/610x610/A0A0A6/FFFFFF.webp?text=610x610-webp" type="image/webp" media="(min-width:30em)" />
<source srcset="https://placehold.co/610x610/A0A0A6/FFFFFF.jpg?text=610x610-jpg" type="image/jpg" media="(min-width:30em)" />
<source srcset="https://placehold.co/409x409/A0A0A6/FFFFFF.webp?text=409x409-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/409/409" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="409" height="409" loading="lazy" />
</picture>
</div>
<div class="card__body">
<div class="card__body__inner">
<div class="card__headline">
<h2 class="headline headline--2">Eine Headline</h2>
</div>
<div class="card__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div class="card__icons"><span class="card__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="two-cards__item"><a class="card" href="#">
<div class="card__image">
<picture>
<source srcset="https://placehold.co/595x595/A0A0A6/FFFFFF.webp?text=595x595-webp" type="image/webp" media="(min-width:64em)" />
<source srcset="https://placehold.co/595x595/A0A0A6/FFFFFF.jpg?text=595x595-jpg" type="image/jpg" media="(min-width:64em)" />
<source srcset="https://placehold.co/610x610/A0A0A6/FFFFFF.webp?text=610x610-webp" type="image/webp" media="(min-width:30em)" />
<source srcset="https://placehold.co/610x610/A0A0A6/FFFFFF.jpg?text=610x610-jpg" type="image/jpg" media="(min-width:30em)" />
<source srcset="https://placehold.co/409x409/A0A0A6/FFFFFF.webp?text=409x409-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/409/409" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="409" height="409" loading="lazy" />
</picture>
</div>
<div class="card__body">
<div class="card__body__inner">
<div class="card__headline">
<h2 class="headline headline--2">Eine Headline</h2>
</div>
<div class="card__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div class="card__icons"><span class="card__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
</div>
</div>
#{tag || 'div'}.two-cards()&attributes(attr)
if headline
.two-cards__headline
+include('@headline--module-2', headline)
.two-cards__inner
each item in items
.two-cards__item
+include(`@${item.use}`, item.settings || {})
{
"headline": {
"text": "Weitere Themen"
},
"items": [
{
"use": "card",
"settings": {
"picture": {
"width": 409,
"height": 409,
"items": [
{
"src": "https://placehold.co/540x540/A0A0A6/FFFFFF.webp?text=595x595-webp",
"type": "webp",
"breakpoint": 1024
},
{
"src": "https://placehold.co/595x595/A0A0A6/FFFFFF.jpg?text=595x595-jpg",
"type": "jpg",
"breakpoint": 1024
},
{
"src": "https://placehold.co/610x610/A0A0A6/FFFFFF.webp?text=610x610-webp",
"type": "webp",
"breakpoint": 480
},
{
"src": "https://placehold.co/610x610/A0A0A6/FFFFFF.jpg?text=610x610-jpg",
"type": "jpg",
"breakpoint": 480
},
{
"src": "https://placehold.co/409x409/A0A0A6/FFFFFF.webp?text=409x409-webp",
"type": "webp",
"breakpoint": null
}
]
}
}
},
{
"use": "card",
"settings": {
"picture": {
"width": 409,
"height": 409,
"items": [
{
"src": "https://placehold.co/595x595/A0A0A6/FFFFFF.webp?text=595x595-webp",
"type": "webp",
"breakpoint": 1024
},
{
"src": "https://placehold.co/595x595/A0A0A6/FFFFFF.jpg?text=595x595-jpg",
"type": "jpg",
"breakpoint": 1024
},
{
"src": "https://placehold.co/610x610/A0A0A6/FFFFFF.webp?text=610x610-webp",
"type": "webp",
"breakpoint": 480
},
{
"src": "https://placehold.co/610x610/A0A0A6/FFFFFF.jpg?text=610x610-jpg",
"type": "jpg",
"breakpoint": 480
},
{
"src": "https://placehold.co/409x409/A0A0A6/FFFFFF.webp?text=409x409-webp",
"type": "webp",
"breakpoint": null
}
]
}
}
}
]
}
.two-cards {
padding: 0 1.5rem;
position: relative;
z-index: 1;
@include mq($from: m) {
padding: 0 3rem;
}
@include mq($from: xl) {
padding: 0 9rem;
}
}
.two-cards__headline {
margin-bottom: 6rem;
text-align: center;
@include mq($from: l) {
margin-bottom: 10rem;
}
}
.two-cards__inner {
margin: 0 auto;
max-width: 61rem;
@include mq($from: l) {
display: flex;
max-width: 127rem;
}
}
.two-cards__item {
@include mq($until: l) {
&:first-child {
margin-bottom: 6rem;
}
}
@include mq($from: l) {
padding: 0 2rem;
width: 50%;
}
}
.two-cards__item .card {
width: 100%;
}
.two-cards__item .card--small {
@include mq($from: l) {
height: 100%;
}
}
default: 409 * 409, ratio 1 / 1
>480: 610 * 610, ratio 1 / 1
>1024: 595 * 595, ratio 1 / 1