<div class="teaser teaser--secondary">
<picture class="image teaser__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/teaser/teaser-medium-girl_376-432.jpg" media="(max-width: 768px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/teaser/teaser-medium-girl_472-432.jpg" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/teaser/teaser-large-girl_1328-1200.jpg" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/teaser/teaser-small-girl_768-768.jpg" alt="Teaser girl image" />
</picture>
<div class="teaser__content">
<div class="teaser__content-block">
<div class="content-block ">
<div class="content-block__row row">
<div class="content-block__column col-xs-12">
<h2 class="content-block__heading">
Trendy inrichting
</h2>
<div class="paragraph content-block__description">
<span>
Voelt je huis niet meer als thuis en ben je toe aan een make-over? Maar heb je niet een al te groot budget om gloednieuwe meubels aan te schaffen? Schaf dan nieuwe trendy woonaccessoires aan. Woonaccessoires maken je huis gezellig! Een mooi schilderij boven een kast , een sierkussen voor op je bank. Kleine aanpassing, groots effect!
</span>
</div>
<a class="link content-block__link" href="#" title="Title">
Link
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="teaser {{ class }}">
{{ render '@image--picture' image }}
<div class="teaser__content">
<div class="teaser__content-block">
{{ render (component contentElement) contentContext merge=true }}
</div>
</div>
</div>
{
"class": "teaser--secondary",
"image": {
"src": "/images/home/teaser/teaser-small-girl_768-768.jpg",
"class": "teaser__image",
"defaultSrc": "/images/home/teaser/teaser-small-girl_768-768.jpg",
"sources": [
{
"src": "/images/home/teaser/teaser-medium-girl_376-432.jpg",
"mediaQuery": "(max-width: 768px)"
},
{
"src": "/images/home/teaser/teaser-medium-girl_472-432.jpg",
"mediaQuery": "(max-width: 1024px)"
},
{
"src": "/images/home/teaser/teaser-large-girl_1328-1200.jpg",
"mediaQuery": ""
}
],
"alt": "Teaser girl image"
},
"contentElement": "content-block"
}
$teaser__margin : 0 !default;
$teaser__margin\@medium : 0 !default;
$teaser__background-color : $teal !default;
$teaser__content-padding : $spacer--2 !default;
$teaser__content-padding\@medium : $spacer--25 !default;
$teaser__content-padding\@large : $spacer--3 !default;
$teaser__content-width : 100%;
$teaser__content-width\@medium : 50%;;
$teaser__content-width\@large : 50%;
$teaser__content-block-background-color: $white !default;
$teaser--green : $theme-primary !default;
$teaser--black : $black !default;
$teaser--grey-dark : $gray-dark !default;
$teaser--grey : $gray !default;
$teaser--grey-light : $gray-light !default;
$teaser--white : $white !default;
$teaser--blue : $seafoam-blue !default;
$teaser--brown : $brown !default;
$teaser--yellow : $yellow !default;
$teaser--orange : $orange !default;
$teaser--red : $red !default;
$teaser--pink : $pink !default;
$teaser--purple : $purple !default;
@import 'teaser-variables';
.teaser {
display: flex;
flex-flow: row wrap;
margin: $teaser__margin;
background-color: $teaser__background-color;
&--secondary {
flex-direction: row-reverse;
}
@include mq($screen-m) {
flex-wrap: nowrap;
margin: $teaser__margin\@medium;
}
&__image {
width: 100%;
@include mq($screen-m) {
width: 50%;
}
}
&__content {
display: flex;
width: $teaser__content-width;
padding: $teaser__content-padding;
@include mq($screen-m) {
width: $teaser__content-width\@medium;
padding: $teaser__content-padding\@medium;
}
@include mq($screen-xl) {
width: $teaser__content-width\@large;
padding: $teaser__content-padding\@large;
}
}
&__content-block {
display: flex;
align-items: center;
height: 100%;
background-color: $teaser__content-block-background-color;
}
&--green {
background: $teaser--green;
}
&--black {
background: $teaser--black;
}
&--white {
background: $teaser--white;
}
&--grey-dark {
background: $teaser--grey-dark;
}
&--grey {
background: $teaser--grey;
}
&--grey-light {
background: $teaser--grey-light;
}
&--blue {
background: $teaser--blue;
}
&--brown {
background: $teaser--brown;
}
&--yellow {
background: $teaser--yellow;
}
&--orange {
background: $teaser--orange;
}
&--red {
background: $teaser--red;
}
&--pink {
background: $teaser--pink;
}
&--purple {
background: $teaser--purple;
}
}
There are no notes for this item.