<div class="teaser-images teaser-image--secondary teaser-images--grey-light row">
<div class="col-md-6">
<div class="teaser-images__wrapper">
<div class="row">
<div class="col-xs-6 teaser-image__col">
<picture class="image teaser-image__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/catalog-grid-item/bedlegerig-pakket.jpeg" media="(max-width: 768px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/catalog-grid-item/bedlegerig-pakket.jpeg" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/catalog-grid-item/bedlegerig-pakket.jpeg" alt="Teaser girl image" />
</picture>
</div>
<div class="col-xs-6 teaser-image__col">
<picture class="image teaser-image__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/catalog-grid-item/bedlegerig-pakket.jpeg" media="(max-width: 768px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/catalog-grid-item/bedlegerig-pakket.jpeg" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/catalog-grid-item/bedlegerig-pakket.jpeg" alt="Teaser girl image" />
</picture>
</div>
<div class="col-xs-6 teaser-image__col">
<picture class="image teaser-image__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/catalog-grid-item/bedlegerig-pakket.jpeg" media="(max-width: 768px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/catalog-grid-item/bedlegerig-pakket.jpeg" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/catalog-grid-item/bedlegerig-pakket.jpeg" alt="Teaser girl image" />
</picture>
</div>
<div class="col-xs-6 teaser-image__col">
<picture class="image teaser-image__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/catalog-grid-item/bedlegerig-pakket.jpeg" media="(max-width: 768px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/catalog-grid-item/bedlegerig-pakket.jpeg" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/catalog-grid-item/bedlegerig-pakket.jpeg" alt="Teaser girl image" />
</picture>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="teaser-images__content">
<div class="teaser-images__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">
Op maat gemaakte loftdeur als blikvanger
</h2>
<div class="paragraph content-block__description content-block__2columns">
<div class="paragraph ">
<strong>
Elke deur wordt op speciaal op maat gemaakt voor u met de door u doorgegeven specificaties
</strong>
</div>
<div class="paragraph ">
<strong>
Elke deur wordt op speciaal op maat gemaakt voor u met de door u doorgegeven specificaties
</strong>
</div>
<div class="paragraph ">
<strong>
Elke deur wordt op speciaal op maat gemaakt voor u met de door u doorgegeven specificaties
</strong>
</div>
<div class="paragraph ">
<strong>
Elke deur wordt op speciaal op maat gemaakt voor u met de door u doorgegeven specificaties
</strong>
</div>
</div>
<a class="button content-block__link" href="#" title="Op maat gemaakte loftdeur als blikvanger">
bekijk alle loftdeuren
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="teaser-images {{ class }} {{ color }} row">
<div class="col-md-6">
<div class="teaser-images__wrapper">
<div class="row">
{{#each images }}
<div class="col-xs-6 teaser-image__col">
{{ render '@image--picture' image }}
</div>
{{/each}}
</div>
</div>
</div>
<div class="col-md-6">
<div class="teaser-images__content">
<div class="teaser-images__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">
{{ title }}
</h2>
<div class="paragraph content-block__description {{ paragraphClass }}">
{{#each descriptions }}
{{ render '@paragraph' title }}
{{/each}}
</div>
<a class="button content-block__link" href="#" title="{{ title }}">
{{ buttonLabel }}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"class": "teaser-image--secondary",
"color": "teaser-images--grey-light",
"title": "Op maat gemaakte loftdeur als blikvanger",
"buttonLabel": "bekijk alle loftdeuren",
"paragraphClass": "content-block__2columns",
"descriptions": [
{
"title": {
"tag": "strong",
"text": "Elke deur wordt op speciaal op maat gemaakt voor u met de door u doorgegeven specificaties"
}
},
{
"title": {
"tag": "strong",
"text": "Elke deur wordt op speciaal op maat gemaakt voor u met de door u doorgegeven specificaties"
}
},
{
"title": {
"tag": "strong",
"text": "Elke deur wordt op speciaal op maat gemaakt voor u met de door u doorgegeven specificaties"
}
},
{
"title": {
"tag": "strong",
"text": "Elke deur wordt op speciaal op maat gemaakt voor u met de door u doorgegeven specificaties"
}
}
],
"images": [
{
"image": {
"src": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"class": "teaser-image__image",
"defaultSrc": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"sources": [
{
"src": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"mediaQuery": "(max-width: 768px)"
},
{
"src": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"mediaQuery": ""
}
],
"alt": "Teaser girl image"
}
},
{
"image": {
"src": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"class": "teaser-image__image",
"defaultSrc": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"sources": [
{
"src": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"mediaQuery": "(max-width: 768px)"
},
{
"src": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"mediaQuery": ""
}
],
"alt": "Teaser girl image"
}
},
{
"image": {
"src": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"class": "teaser-image__image",
"defaultSrc": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"sources": [
{
"src": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"mediaQuery": "(max-width: 768px)"
},
{
"src": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"mediaQuery": ""
}
],
"alt": "Teaser girl image"
}
},
{
"image": {
"src": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"class": "teaser-image__image",
"defaultSrc": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"sources": [
{
"src": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"mediaQuery": "(max-width: 768px)"
},
{
"src": "/images/catalog-grid-item/bedlegerig-pakket.jpeg",
"mediaQuery": ""
}
],
"alt": "Teaser girl image"
}
}
]
}
$teaser-image__margin : 0 !default;
$teaser-image__margin\@medium : 0 !default;
$teaser-image__background-color : $teal !default;
$teaser-image__padding : 0 !default;
$teaser-image__padding\@medium : $spacer--3 !default;
$teaser-image__content-padding : 0 !default;
$teaser-image__content-padding\@medium : 0 !default;
$teaser-image__content-padding\@large : 0 !default;
$teaser-image__content-block-background-color: $white !default;
$teaser-images__content-block-padding : $spacer--2 !default;
$teaser-image--green : $theme-primary !default;
$teaser-image--black : $black !default;
$teaser-image--grey-dark : $gray-dark !default;
$teaser-image--grey : $gray !default;
$teaser-image--grey-light : $gray-light !default;
$teaser-image--white : $white !default;
$teaser-image--blue : $seafoam-blue !default;
$teaser-image--brown : $brown !default;
$teaser-image--yellow : $yellow !default;
$teaser-image--orange : $orange !default;
$teaser-image--red : $red !default;
$teaser-image--pink : $pink !default;
$teaser-image--purple : $purple !default;
@import 'banner-with-section-variables';
.teaser-images {
display: flex;
flex-flow: row wrap;
margin: $teaser-image__margin;
background-color: $teaser-image__background-color;
align-items: center;
padding: $teaser-image__padding;
@include mq($screen-m) {
padding: $teaser-image__padding\@medium;
}
&__wrapper {
margin-left: 7px;
margin-right: 7px;
}
&__image-col {
margin-bottom: 2px;
padding-right: 1px;
padding-left: 1px;
}
&--secondary {
flex-direction: row-reverse;
}
@include mq($screen-m) {
flex-wrap: nowrap;
margin: $teaser-image__margin\@medium;
}
&__content {
display: flex;
width: 100%;
padding: $teaser-image__content-padding;
@include mq($screen-m) {
padding: $teaser-image__content-padding\@medium;
}
@include mq($screen-xl) {
padding: $teaser-image__content-padding\@large;
}
}
&__content-block {
display: flex;
align-items: center;
height: 100%;
background-color: $teaser-image__content-block-background-color;
& .content-block {
padding: 0;
@include mq($screen-l) {
padding: $teaser-images__content-block-padding;
}
&__heading {
font-family: $font-family-base;
text-transform: none;
font-weight: 500;
@include mq($screen-l) {
font-size: $font-size-super-extra-large;
}
}
&__2columns {
@include mq($screen-l) {
//-webkit-column-count: 2;
//-moz-column-count: 2;
column-count: 2;
//-webkit-column-gap: 40px;
//-moz-column-gap: 40px;
column-gap: 40px;
}
}
}
}
&--green {
background: $teaser-image--green;
}
&--black {
background: $teaser-image--black;
}
&--white {
background: $teaser-image--white;
}
&--grey-dark {
background: $teaser-image--grey-dark;
}
&--grey {
background: $teaser-image--grey;
}
&--grey-light {
background: $teaser-image--grey-light;
}
&--blue {
background: $teaser-image--blue;
}
&--brown {
background: $teaser-image--brown;
}
&--yellow {
background: $teaser-image--yellow;
}
&--orange {
background: $teaser-image--orange;
}
&--red {
background: $teaser-image--red;
}
&--pink {
background: $teaser-image--pink;
}
&--purple {
background: $teaser-image--purple;
}
}
There are no notes for this item.