<div class="section-teaser">
<div class="section-teaser__image">
<div class="parallax-image">
<div class="image image--cover loading"><noscript><img class="image__fallback" alt="Alternativ-Text" width="1440" height="450" src="../../images/content/teaser-1440x450.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="1440" height="450" data-src="../../images/content/teaser-1440x450.jpg" /></div>
</div>
</div>
<div class="section-teaser__body">
<div class="section-teaser__headline">
<h1 class="headline headline--module-1">Offene Stellen bei Helmholtz Die Höhe des Teaser richtet sich nach Der Texthöhe</h1>
</div>
<div class="section-teaser__button"><a class="button button--primary" href="#"><span class="button__inner"><span class="button__text">Text-Button</span></span></a></div>
</div>
</div>
#{tag || 'div'}.section-teaser()&attributes(attr)
.section-teaser__image
if parallax
+include('@parallax--image', parallax)
if image
+include('@image', image)
.section-teaser__body
if headline
.section-teaser__headline
+include('@headline--module-1', headline)
if button
.section-teaser__button
+include('@button', button)
{
"headline": {
"text": "Offene Stellen bei Helmholtz Die Höhe des Teaser richtet sich nach Der Texthöhe"
},
"button": {
"text": "Text-Button"
},
"parallax": {
"image": {
"src": "/images/content/teaser-1440x450.jpg",
"width": 1440,
"height": 450,
"cover": true
}
}
}
.section-teaser {
color: #fff;
position: relative;
}
.section-teaser__image .image {
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.parallax-image {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.section-teaser__body {
padding: 7rem 1.5rem;
position: relative;
z-index: 1;
@include mq($from: m) {
padding: 9rem 3rem 8rem;
}
@include mq($from: xl) {
padding: 17rem 0 15rem 9rem;
}
}
.section-teaser__headline {
margin-bottom: 1.5rem;
@include mq($from: m) {
margin-bottom: 4rem;
width: 66%;
}
@include mq($from: xl) {
max-width: 80rem;
width: 50%;
}
}
There are no notes for this item.