<div class="hero hero--advanced container">
    <div class="hero--advanced__left">
        <div class="hero--one">
            <div class="hero--advanced__wrapper ">
                <div class="hero--one__text container">
                    <h1 class="hero--one__text--heading--first">
                        Trendy woonaccessoires
                    </h1>
                    <h4 class="hero--one__text--heading--second">
                        Wanneer je op zoek bent naar vernieuwing in huis voor in het nieuwe jaar!
                    </h4>
                    <a class="button button--icon-light" href="https://kistenkoning.test//woonaccessoires" title="">
                        <svg class="icon fill--light button__icon" role="img">
                            <use xlink:href="https://kistenkoning.test/static/version1613484851/frontend/FalconMedia/Kistenkoning/nl_NL/images/icons-sprite.svg#angle-right"></use>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="hero--one__background">
                <picture class="image">
                    <img src="https://images.prismic.io/kistenkoning/ed790ead-f82e-4bae-93ad-1862e8ccc0c3_black-to-basic-4812.jpeg?auto=compress,format&amp;rect=0,225,1500,572&amp;w=1180&amp;h=450">
                </picture>
            </div>
        </div>
    </div>
    <div class="hero--advanced__right">
        <div class="hero--two">
            <div class="hero--two__background">
                <a href="#">
                    <picture class="image">
                        <img src="https://images.prismic.io/kistenkoning/9dfc57ed-fd37-4f4f-a031-6de3cf3b293a_simonscoffee.jpg?auto=compress,format&amp;rect=0,40,899,382&amp;w=513&amp;h=218">
                    </picture>
                </a>
            </div>
        </div>
        <div class="hero--three">
            <div class="hero--three__background">
                <a href="#">
                    <picture class="image">
                        <img src="https://images.prismic.io/kistenkoning/1b27664b-29bd-4e77-9b24-518d7146b051_diy_fruitschaal_van_fruitkistjes.png?auto=compress,format&amp;rect=0,52,516,219&amp;w=513&amp;h=218">
                    </picture>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="hero hero--advanced container">
    <div class="hero--advanced__left">
        <div class="hero--one">
            <div class="hero--advanced__wrapper ">
                <div class="hero--one__text container">
                    <h1 class="hero--one__text--heading--first">
                        Trendy woonaccessoires
                    </h1>
                    <h4 class="hero--one__text--heading--second">
                        Wanneer je op zoek bent naar vernieuwing in huis voor in het nieuwe jaar!
                    </h4>
                    <a class="button button--icon-light" href="https://kistenkoning.test//woonaccessoires" title="">
                        <svg class="icon fill--light button__icon" role="img">
                            <use xlink:href="https://kistenkoning.test/static/version1613484851/frontend/FalconMedia/Kistenkoning/nl_NL/images/icons-sprite.svg#angle-right"></use>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="hero--one__background">
                <picture class="image">
                    <img src="https://images.prismic.io/kistenkoning/ed790ead-f82e-4bae-93ad-1862e8ccc0c3_black-to-basic-4812.jpeg?auto=compress,format&amp;rect=0,225,1500,572&amp;w=1180&amp;h=450">
                </picture>
            </div>
        </div>
    </div>
    <div class="hero--advanced__right">
        <div class="hero--two">
            <div class="hero--two__background">
                <a href="#">
                    <picture class="image">
                        <img src="https://images.prismic.io/kistenkoning/9dfc57ed-fd37-4f4f-a031-6de3cf3b293a_simonscoffee.jpg?auto=compress,format&amp;rect=0,40,899,382&amp;w=513&amp;h=218">
                    </picture>
                </a>
            </div>
        </div>
        <div class="hero--three">
            <div class="hero--three__background">
                <a href="#">
                    <picture class="image">
                        <img src="https://images.prismic.io/kistenkoning/1b27664b-29bd-4e77-9b24-518d7146b051_diy_fruitschaal_van_fruitkistjes.png?auto=compress,format&amp;rect=0,52,516,219&amp;w=513&amp;h=218">
                    </picture>
                </a>
            </div>
        </div>
    </div>
</div>
{
  "heroImage": {
    "dataSrc": "/images/banner/visual.png"
  },
  "heroBackground": {
    "dataSrc": "/images/banner/visual_second.jpg"
  },
  "heroTitle": "kom naar onze fysieke winkel!",
  "heroClass": "",
  "button": {
    "name": "icon-after-light",
    "tag": "a",
    "class": "button--fluid",
    "icon": {
      "id": "angle-right",
      "title": "angle-right",
      "class": "button__icon"
    },
    "attributes": "href=\"#\" title=\"I am a link button\"",
    "text": "Over ons"
  },
  "variants": [
    {
      "name": "secondary",
      "heroClass": "hero--secondary",
      "context": {
        "heroClass": "hero--secondary",
        "buttonSecondary": {
          "name": "icon-after-light",
          "class": "button--icon-light",
          "tag": "a",
          "text": "Button Icon after",
          "icon": {
            "id": "arrow-right",
            "title": "Arrow Right",
            "class": "button__icon",
            "hidden": true
          },
          "attributes": "type=\"button\" aria-label=\"click to do something\""
        }
      }
    }
  ]
}
  • Content:
    $hero-secondary__heading--font-style             : italic !default;
    $hero-secondary__heading--font-family            : $font-family-base !default;
    $hero-secondary__heading--font-weight            : $font-weight-bold !default;
    $hero-secondary__heading--font-size              : 55px !default;
    $hero-secondary__heading--line-height            : 110% !default;
    $hero-secondary__heading--color                  : $white !default;
    $hero-secondary__heading--text-shadow            : 2px 2px 7px $bg-color-dark !default;
    
    $hero-tertiary__heading--title-font-size         : 30px !default;
    $hero-tertiary__heading--title-line-height       : 110% !default;
    $hero-tertiary__heading--title-font-weight       : $font-weight-normal !default;
    $hero-tertiary__heading--title-color             : $dkk-second !default;
    
    $hero-tertiary__heading--description-font-size   : 15px !default;
    $hero-tertiary__heading--description-line-height : 165% !default;
    $hero-tertiary__heading--description-color       : $white !default;
    $hero-tertiary__heading--description-font-weight : $font-weight-normal !default;
    $hero-advanced__column-gap                       : 1% !default;
    $hero-advanced__grid-template-columns            : 69% 30% !default;
    
    .hero {
        &--advanced {
            display: flex;
            flex-direction: column;
            padding: 0;
    
            @include mq($screen-m) {
                position: relative;
                margin-top: $spacer--semi-medium;
            }
            &__wrapper {
                position: absolute;
                margin-top: $spacer--extra-large;
                padding: $spacer--large;
                bottom: $spacer--medium;
                background: rgba(255, 255, 255, 0.65);
                border-radius: 0 15px 15px 0;
            }
            &__right {
                display: flex;
                flex-direction: row;
                @include mq($screen-m) {
                    display: grid;
                    row-gap: 1.4%; // sass-lint:disable-line no-misspelled-properties
                }
            }
            &__item {
                display: flex;
                padding: $spacer 0 0;
                @include mq($screen-m) {
                    padding: 0;
                }
                a {
                    width: 100%;
                }
            }
        }
        &__wrapper {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            background: linear-gradient(90deg, #444 1.5%, rgba(31, 27, 26, 0) 110%);
    
            @include mq($screen-m) {
                flex-direction: row;
            }
        }
    
        &__text {
            width: 100%;
    
            &--heading--first {
                display: flex;
                flex-direction: column;
                font-style: $hero-secondary__heading--font-style;
                font-family: $hero-secondary__heading--font-family;
                font-weight: $hero-secondary__heading--font-weight;
                font-size: $hero-secondary__heading--font-size;
                line-height: $hero-secondary__heading--line-height;
                color: $hero-secondary__heading--color;
                text-shadow: $hero-secondary__heading--text-shadow;
            }
    
            &--color {
                font-style: $hero-secondary__heading--font-style;
                font-weight: $hero-secondary__heading--font-weight;
                font-size: $hero-secondary__heading--font-size;
                line-height: $hero-secondary__heading--line-height;
                color: $dkk-second;
                //-webkit-text-fill-color: transparent; // sass-lint:disable-line no-vendor-prefixes
                //-webkit-text-stroke-width: 2px; // sass-lint:disable-line no-vendor-prefixes
                //-webkit-text-stroke-color: $dkk-second; // sass-lint:disable-line no-vendor-prefixes
            }
    
            &--heading--second {
                font-family: $font-family-sans-serif;
                font-size: $font-size-medium;
                color: $hero-tertiary__heading--description-color;
                margin-bottom: 1em;
                letter-spacing: 0.5px;
                width: 60%;
            }
    
            &--heading--title {
                font-weight: $hero-tertiary__heading--title-font-weight;
                font-size: $hero-tertiary__heading--title-font-size;
                line-height: $hero-tertiary__heading--description-line-height;
                color: $hero-tertiary__heading--description-color;
            }
    
            &--heading--description {
                font-weight: $hero-tertiary__heading--description-font-weight;
                font-size: $hero-tertiary__heading--description-font-size;
                line-height: $hero-tertiary__heading--description-line-height;
                color: $hero-tertiary__heading--description-color;
            }
        }
    
        &__image {
            display: none;
    
            @include mq($screen-m) {
                display: block;
            }
        }
    
        &__background {
            grid-area: overflow;
            height: inherit;
    
            & .image {
                object-fit: cover;
                object-position: top;
                height: 100%;
            }
        }
    
        &--secondary {
            display: grid;
            grid-template-areas: "overflow";
            height: 490px;
    
            @include mq($screen-m) {
                height: 515px;
            }
    
            & .hero__wrapper {
                grid-area: overflow;
                position: relative;
            }
        }
    
        &--category {
            background-color: $black;
            margin-bottom: $spacer--semi-medium;
    
            @include mq($screen-m) {
                height: 320px;
            }
        }
        // ==============
        // HERO SLIDER
        // ==============
        &-slider {
            position: relative;
            overflow: hidden;
            transition: $transition-base;
    
            &__inner {
                display: grid;
                grid-auto-columns: 100%;
                grid-auto-flow: column;
                overflow: scroll;
                overflow-y: hidden;
                scroll-snap-type: x mandatory;
                padding: 0;
    
                @include mq($screen-m) {
                    overflow: hidden;
                }
            }
    
            &--responsive {
                & .slider__inner {
                    @include mq($screen-m) {
                        grid-auto-flow: row;
                    }
                }
            }
    
    
            &__button {
                display: none;
                position: absolute;
                z-index: 9;
                top: 45%;
                padding: $spacer;
                cursor: pointer;
                user-select: none;
                background: rgba(255, 255, 255, 0.8);
                border: 1px solid $dkk-primary;
                border-radius: 10px;
    
                @include mq($screen-m) {
                    display: block;
                }
    
                &--left {
                    left: 0;
                }
    
                &--right {
                    right: 0;
                }
    
                &--icon {
                    fill: $dkk-primary;
                    width: $spacer--25;
                    height: $spacer--25;
    
                }
            }
        }
    }
    
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: build/components/Organisms/hero/_hero.scss
  • Size: 6.8 KB

There are no notes for this item.