<div class="teaser-images  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="https://images.prismic.io/kistenkoning/397af6e8-e9fa-4779-bedb-91052146fcd2_gebruiktsteiger.webp?auto&#x3D;compress,format&amp;rect&#x3D;0,0,900,600&amp;w&#x3D;384&amp;h&#x3D;256" media="(max-width: 768px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="https://images.prismic.io/kistenkoning/397af6e8-e9fa-4779-bedb-91052146fcd2_gebruiktsteiger.webp?auto&#x3D;compress,format&amp;rect&#x3D;0,0,900,600&amp;w&#x3D;450&amp;h&#x3D;300" media="" />

                        <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="https://images.prismic.io/kistenkoning/397af6e8-e9fa-4779-bedb-91052146fcd2_gebruiktsteiger.webp?auto&#x3D;compress,format&amp;rect&#x3D;0,0,900,600&amp;w&#x3D;450&amp;h&#x3D;300" 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="https://images.prismic.io/kistenkoning/4b2c543f-d105-4b02-982b-de9b489c1ed9_steigerhouten_loftdeur_met_luiken.webp?auto&#x3D;compress,format&amp;rect&#x3D;0,356,1000,667&amp;w&#x3D;384&amp;h&#x3D;256" media="(max-width: 768px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="https://images.prismic.io/kistenkoning/4b2c543f-d105-4b02-982b-de9b489c1ed9_steigerhouten_loftdeur_met_luiken.webp?auto&#x3D;compress,format&amp;rect&#x3D;0,378,1000,667&amp;w&#x3D;450&amp;h&#x3D;300" media="" />

                        <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="https://images.prismic.io/kistenkoning/4b2c543f-d105-4b02-982b-de9b489c1ed9_steigerhouten_loftdeur_met_luiken.webp?auto&#x3D;compress,format&amp;rect&#x3D;0,378,1000,667&amp;w&#x3D;450&amp;h&#x3D;300" 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="https://images.prismic.io/kistenkoning/48e92ecd-94b8-42f1-89b7-a066dd59f980_steigerhouten_loftdeur.webp?auto&#x3D;compress,format&amp;rect&#x3D;0,353,1000,667&amp;w&#x3D;450&amp;h&#x3D;256" media="(max-width: 768px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="https://images.prismic.io/kistenkoning/48e92ecd-94b8-42f1-89b7-a066dd59f980_steigerhouten_loftdeur.webp?auto&#x3D;compress,format&amp;rect&#x3D;0,353,1000,667&amp;w&#x3D;450&amp;h&#x3D;300" media="" />

                        <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="https://images.prismic.io/kistenkoning/48e92ecd-94b8-42f1-89b7-a066dd59f980_steigerhouten_loftdeur.webp?auto&#x3D;compress,format&amp;rect&#x3D;0,353,1000,667&amp;w&#x3D;384&amp;h&#x3D;300" 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="https://images.prismic.io/kistenkoning/97a66efc-7b33-44a0-8a97-21a93539916b_stalen-loftdeuren.webp?auto&#x3D;compress,format&amp;rect&#x3D;0,0,900,600&amp;w&#x3D;384&amp;h&#x3D;256" media="(max-width: 768px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="https://images.prismic.io/kistenkoning/97a66efc-7b33-44a0-8a97-21a93539916b_stalen-loftdeuren.webp?auto&#x3D;compress,format&amp;rect&#x3D;0,0,900,600&amp;w&#x3D;450&amp;h&#x3D;300" media="" />

                        <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="https://images.prismic.io/kistenkoning/97a66efc-7b33-44a0-8a97-21a93539916b_stalen-loftdeuren.webp?auto&#x3D;compress,format&amp;rect&#x3D;0,0,900,600&amp;w&#x3D;450&amp;h&#x3D;300" 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": "",
  "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": "https://images.prismic.io/kistenkoning/397af6e8-e9fa-4779-bedb-91052146fcd2_gebruiktsteiger.webp?auto=compress,format&rect=0,0,900,600&w=450&h=300",
        "class": "teaser-image__image",
        "defaultSrc": "https://images.prismic.io/kistenkoning/397af6e8-e9fa-4779-bedb-91052146fcd2_gebruiktsteiger.webp?auto=compress,format&rect=0,0,900,600&w=450&h=300",
        "sources": [
          {
            "src": "https://images.prismic.io/kistenkoning/397af6e8-e9fa-4779-bedb-91052146fcd2_gebruiktsteiger.webp?auto=compress,format&rect=0,0,900,600&w=384&h=256",
            "mediaQuery": "(max-width: 768px)"
          },
          {
            "src": "https://images.prismic.io/kistenkoning/397af6e8-e9fa-4779-bedb-91052146fcd2_gebruiktsteiger.webp?auto=compress,format&rect=0,0,900,600&w=450&h=300",
            "mediaQuery": ""
          }
        ],
        "alt": "Teaser girl image"
      }
    },
    {
      "image": {
        "src": "https://images.prismic.io/kistenkoning/4b2c543f-d105-4b02-982b-de9b489c1ed9_steigerhouten_loftdeur_met_luiken.webp?auto=compress,format&rect=0,378,1000,667&w=450&h=300",
        "class": "teaser-image__image",
        "defaultSrc": "https://images.prismic.io/kistenkoning/4b2c543f-d105-4b02-982b-de9b489c1ed9_steigerhouten_loftdeur_met_luiken.webp?auto=compress,format&rect=0,378,1000,667&w=450&h=300",
        "sources": [
          {
            "src": "https://images.prismic.io/kistenkoning/4b2c543f-d105-4b02-982b-de9b489c1ed9_steigerhouten_loftdeur_met_luiken.webp?auto=compress,format&rect=0,356,1000,667&w=384&h=256",
            "mediaQuery": "(max-width: 768px)"
          },
          {
            "src": "https://images.prismic.io/kistenkoning/4b2c543f-d105-4b02-982b-de9b489c1ed9_steigerhouten_loftdeur_met_luiken.webp?auto=compress,format&rect=0,378,1000,667&w=450&h=300",
            "mediaQuery": ""
          }
        ],
        "alt": "Teaser girl image"
      }
    },
    {
      "image": {
        "src": "https://images.prismic.io/kistenkoning/48e92ecd-94b8-42f1-89b7-a066dd59f980_steigerhouten_loftdeur.webp?auto=compress,format&rect=0,353,1000,667&w=450&h=300",
        "class": "teaser-image__image",
        "defaultSrc": "https://images.prismic.io/kistenkoning/48e92ecd-94b8-42f1-89b7-a066dd59f980_steigerhouten_loftdeur.webp?auto=compress,format&rect=0,353,1000,667&w=384&h=300",
        "sources": [
          {
            "src": "https://images.prismic.io/kistenkoning/48e92ecd-94b8-42f1-89b7-a066dd59f980_steigerhouten_loftdeur.webp?auto=compress,format&rect=0,353,1000,667&w=450&h=256",
            "mediaQuery": "(max-width: 768px)"
          },
          {
            "src": "https://images.prismic.io/kistenkoning/48e92ecd-94b8-42f1-89b7-a066dd59f980_steigerhouten_loftdeur.webp?auto=compress,format&rect=0,353,1000,667&w=450&h=300",
            "mediaQuery": ""
          }
        ],
        "alt": "Teaser girl image"
      }
    },
    {
      "image": {
        "src": "https://images.prismic.io/kistenkoning/97a66efc-7b33-44a0-8a97-21a93539916b_stalen-loftdeuren.webp?auto=compress,format&rect=0,0,900,600&w=450&h=300",
        "class": "teaser-image__image",
        "defaultSrc": "https://images.prismic.io/kistenkoning/97a66efc-7b33-44a0-8a97-21a93539916b_stalen-loftdeuren.webp?auto=compress,format&rect=0,0,900,600&w=450&h=300",
        "sources": [
          {
            "src": "https://images.prismic.io/kistenkoning/97a66efc-7b33-44a0-8a97-21a93539916b_stalen-loftdeuren.webp?auto=compress,format&rect=0,0,900,600&w=384&h=256",
            "mediaQuery": "(max-width: 768px)"
          },
          {
            "src": "https://images.prismic.io/kistenkoning/97a66efc-7b33-44a0-8a97-21a93539916b_stalen-loftdeuren.webp?auto=compress,format&rect=0,0,900,600&w=450&h=300",
            "mediaQuery": ""
          }
        ],
        "alt": "Teaser girl image"
      }
    }
  ]
}
  • Content:
    $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                         : $dkk-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;
    
  • URL: /components/raw/banner-with-section/_banner-with-section-variables.scss
  • Filesystem Path: build/components/Organisms/banner-with-section/_banner-with-section-variables.scss
  • Size: 1.5 KB
  • Content:
    @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 {
                @include mq($screen-m) {
                    padding: $teaser-images__content-block-padding;
                }
                &__heading {
                    font-family: $font-family-base;
                    text-transform: none;
                    font-weight: 500;
                    @include mq($screen-m) {
                        font-size: $font-size-super-extra-large;
                    }
                }
                &__2columns {
                    //-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;
        }
    }
    
  • URL: /components/raw/banner-with-section/_banner-with-section.scss
  • Filesystem Path: build/components/Organisms/banner-with-section/_banner-with-section.scss
  • Size: 2.7 KB

There are no notes for this item.