<div class="teaser-newsletter">
<div class="teaser-newsletter__image">
<picture>
<source srcset="https://placehold.co/1920x292/A0A0A6/FFFFFF.webp?text=1920x292-webp" type="image/webp" media="(min-width:64em)" />
<source srcset="https://placehold.co/1920x292/A0A0A6/FFFFFF.jpg?text=1920x292-jpg" type="image/jpg" media="(min-width:64em)" />
<source srcset="https://placehold.co/968x268/A0A0A6/FFFFFF.webp?text=968x268-webp" type="image/webp" media="(min-width:48em)" />
<source srcset="https://placehold.co/968x268/A0A0A6/FFFFFF.jpg?text=968x268-jpg" type="image/jpg" media="(min-width:48em)" />
<source srcset="https://placehold.co/712x230/A0A0A6/FFFFFF.webp?text=712x230-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/712/230" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="712" height="230" loading="lazy" />
</picture>
</div>
<div class="teaser-newsletter__body">
<div class="teaser-newsletter__headline">
<h2 class="headline headline--module-2">Newsletter bestellen</h2>
</div>
<div class="teaser-newsletter__button"><a class="button button--primary" href="#"><span class="button__inner"><span class="button__text">Zur Anmeldung</span></span></a></div>
</div>
</div>
#{tag || 'div'}.teaser-newsletter()&attributes(attr)
.teaser-newsletter__image
+include('@picture', picture)
.teaser-newsletter__body
.teaser-newsletter__headline
+include('@headline--module-2', headline)
.teaser-newsletter__button
+include('@button', button)
{
"picture": {
"src": null,
"width": 712,
"height": 230,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/1920x292/A0A0A6/FFFFFF.webp?text=1920x292-webp",
"type": "webp",
"breakpoint": 1024
},
{
"src": "https://placehold.co/1920x292/A0A0A6/FFFFFF.jpg?text=1920x292-jpg",
"type": "jpg",
"breakpoint": 1024
},
{
"src": "https://placehold.co/968x268/A0A0A6/FFFFFF.webp?text=968x268-webp",
"type": "webp",
"breakpoint": 768
},
{
"src": "https://placehold.co/968x268/A0A0A6/FFFFFF.jpg?text=968x268-jpg",
"type": "jpg",
"breakpoint": 768
},
{
"src": "https://placehold.co/712x230/A0A0A6/FFFFFF.webp?text=712x230-webp",
"type": "webp",
"breakpoint": null
}
]
},
"headline": {
"text": "Newsletter bestellen"
},
"button": {
"href": "#",
"text": "Zur Anmeldung"
}
}
.teaser-newsletter {
color: #fff;
padding: 6rem 1.5rem;
position: relative;
@include mq($from: m) {
padding: 7rem 3rem;
}
@include mq($from: xl) {
padding: 8rem 9rem;
}
}
.teaser-newsletter__image {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
img {
height: 100%;
object-fit: cover;
}
}
.teaser-newsletter__body {
margin: 0 auto;
max-width: $content-max-width;
position: relative;
z-index: 1;
}
.teaser-newsletter__headline {
margin-bottom: 3rem;
text-align: center;
@include mq($from: m) {
margin-bottom: 4rem;
}
}
.teaser-newsletter__form {
position: relative;
}
.teaser-newsletter__form__submit {
background: transparent;
border: 0;
color: $color-blue;
height: 5.2rem;
position: absolute;
right: 0;
top: 0;
width: 5.2rem;
}
.teaser-newsletter__form__submit .icon {
height: 2.5rem;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 2.5rem;
}
.teaser-newsletter__form__checkbox {
display: block;
margin: 3rem auto 0;
max-width: 43rem;
text-align: left;
.checkbox {
padding-left: 3.5rem;
position: relative;
}
.checkbox__label::before {
left: 0;
position: absolute;
top: 0.8rem;
}
.checkbox__label .link {
color: #fff;
}
}
.teaser-newsletter__button {
text-align: center;
}
default: 712 * 230, ratio 2 / 1
> 768px: 968 * 268, ratio 2 / 1
> 1260px: 1920 * 292, ratio 2 / 1