Kistenkoning components for Magento 2

Banner With Section: Default 

<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.