<div class="teaser-newsletter">
<div class="teaser-newsletter__image">
<div class="image image--cover loading"><noscript><img class="image__fallback" alt="Alternativ-Text" width="1920" height="300" src="../../images/content/teaser-newsletter.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="1920" height="300" data-src="../../images/content/teaser-newsletter.jpg" /></div>
</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__form">
<form action="#"><input class="input" placeholder="E-Mail Adresse eingeben und anmelden" type="text"></input><button class="teaser-newsletter__form__submit" type="submit"><svg class="icon icon--send" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-send"></use>
</svg></button>
<div class="teaser-newsletter__form__checkbox">
<div class="checkbox checkbox--default"><input class="checkbox__input" id="checkbox-|***5fbbe5***|" type="checkbox" name="checkbox-name" /><label class="checkbox__label" for="checkbox-|***5fbbe5***|">Ich habe die <a href="#" class="link">Datenschutzerklärung</a> gelesen und bin mit der Datenverarbeitung einverstanden.</label></div>
</div>
</form>
</div>
</div>
</div>
#{tag || 'div'}.teaser-newsletter()&attributes(attr)
.teaser-newsletter__image
+include('@image--cover', image)
.teaser-newsletter__body
.teaser-newsletter__headline
+include('@headline--module-2', headline)
if button
.teaser-newsletter__button
+include('@button', button)
else
.teaser-newsletter__form
form(action='#')
+include('@input', input)
button.teaser-newsletter__form__submit(type='submit')
+include('@icon', { icon: 'send' })
.teaser-newsletter__form__checkbox
+include('@checkbox', checkbox)
{
"image": {
"src": "/images/content/teaser-newsletter.jpg",
"width": 1920,
"height": 300,
"alt": "Alternativ-Text"
},
"headline": {
"text": "Newsletter bestellen"
},
"input": {
"attr": {
"placeholder": "E-Mail Adresse eingeben und anmelden"
}
},
"checkbox": {
"label": "Ich habe die <a href=\"#\" class=\"link\">Datenschutzerklärung</a> gelesen und bin mit der Datenverarbeitung einverstanden.\n"
}
}
.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;
.image {
height: 100%;
}
}
.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;
}
There are no notes for this item.