<div class="hero fullpage-scroller hero--secondary slider">
    <div class="overflow-hidden">
        <div class="hero__wrapper" style="background-image: url('/images/solarwood/foto%20grijs%20origineel.jpg')">
            <div class="shadow">
                <div class="shadow__top"></div>
                <div class="shadow__top--bottom"></div>
                <div class="shadow__left"></div>
            </div>

            <div class="hero__text container">
                <div class="md-width-50">
                    <h1 class="hero__text--heading--first">
                        Blending high-end design with the best solar panels
                    </h1>
                    <h4 class="hero__text--heading--second">
                        We combine the best of both worlds
                    </h4>
                    <a class="button button--transparent border-white rounded-w25" href="#" title="Start exploring">
                        Start exploring
                    </a>

                </div>
            </div>

        </div>
    </div>
    < class="button ">

    </>

</div>
<div class="hero fullpage-scroller hero--secondary slider">
    <div class="overflow-hidden">
        <div class="hero__wrapper" style="background-image: url('/images/solarwood/foto%20grijs%20origineel.jpg')">
            <div class="shadow">
                <div class="shadow__top"></div>
                <div class="shadow__top--bottom"></div>
                <div class="shadow__left"></div>
            </div>

            <div class="hero__text container">
                <div class="md-width-50">
                    <h1 class="hero__text--heading--first">
                        Blending high-end design with the best solar panels
                    </h1>
                    <h4 class="hero__text--heading--second">
                        We combine the best of both worlds
                    </h4>
                    {{ render '@button' button }}
                </div>
            </div>

        </div>
    </div>
    {{ render '@button' octagon }}
</div>
{
  "heroImage": {
    "dataSrc": "/images/banner/visual.png"
  },
  "heroBackground": {
    "dataSrc": "/images/banner/visual_second.jpg"
  },
  "octagon": {
    "icon": {
      "id": "octagon",
      "title": "octagon",
      "class": "octagon",
      "hidden": true
    },
    "label": "Winkelwagen",
    "link": "/cart",
    "ariaLabel": "Shopping cart dropdown trigger"
  },
  "heroTitle": "kom naar onze fysieke winkel!",
  "heroClass": "",
  "button": {
    "name": "icon-after-light",
    "tag": "a",
    "class": "button--transparent border-white rounded-w25",
    "icon": {
      "id": "arrow-down",
      "title": "angle-right",
      "class": "button__icon"
    },
    "attributes": "href=\"#\" title=\"Start exploring\"",
    "text": "Start exploring"
  },
  "variants": [
    {
      "name": "primary",
      "heroClass": "hero--primary",
      "context": {
        "button": {
          "name": "icon-after-light",
          "tag": "a",
          "class": "button--transparent border-white rounded-w25",
          "icon": {
            "id": "angle-down",
            "title": "arrow-right",
            "class": "button__icon"
          },
          "attributes": "href=\"#\" title=\"Start exploring\"",
          "text": "Start exploring"
        },
        "heroClass": "hero--secondary",
        "buttonSecondary": {
          "name": "icon-after-light",
          "class": "button--transparent border-white rounded-w25",
          "tag": "a",
          "text": "Button Icon after",
          "icon": {
            "id": "arrow-down",
            "title": "Arrow Right",
            "class": "button__icon",
            "hidden": true
          },
          "attributes": "href=\"#\" title=\"Start exploring\""
        }
      }
    },
    {
      "name": "secondary",
      "heroClass": "hero--secondary",
      "context": {
        "image": "/images/hero/hero_project_overview.jpg",
        "button": {
          "name": "icon-after-light",
          "tag": "a",
          "class": "button--transparent border-white rounded-w25",
          "icon": {
            "id": "angle-down",
            "title": "arrow-right",
            "class": "button__icon"
          },
          "attributes": "href=\"#\" title=\"Start exploring\"",
          "text": "Start exploring"
        },
        "heroClass": "hero--secondary",
        "buttonSecondary": {
          "name": "icon-after-light",
          "class": "button--transparent border-white rounded-w25",
          "tag": "a",
          "text": "Button Icon after",
          "icon": {
            "id": "arrow-right",
            "title": "Arrow Right",
            "class": "button__icon",
            "hidden": true
          },
          "attributes": "href=\"#\" title=\"Get updates\""
        }
      }
    },
    {
      "name": "fullpage-address",
      "heroClass": "hero--fullpage-address",
      "context": {
        "image": "/images/hero/hero_project_overview.jpg",
        "button": {
          "name": "icon-after-light",
          "tag": "a",
          "class": "button--transparent border-white rounded-w25",
          "icon": {
            "id": "angle-down",
            "title": "arrow-downbutt",
            "class": "button__icon"
          },
          "attributes": "href=\"#\" title=\"Start exploring\"",
          "text": "Start exploring"
        },
        "buttonBottom": {
          "name": "icon-after-light",
          "tag": "a",
          "class": "button--transparent border-white rounded-w25",
          "icon": {
            "id": "angle-down",
            "title": "arrow-right",
            "class": "button__icon"
          },
          "attributes": "href=\"#\" title=\"Start exploring\"",
          "text": "Start exploring"
        },
        "heroClass": "hero--secondary",
        "buttonSecondary": {
          "name": "icon-after-light",
          "class": "button--transparent border-white rounded-w25",
          "tag": "a",
          "text": "Button Icon after",
          "icon": {
            "id": "arrow-down",
            "title": "Arrow Right",
            "class": "button__icon",
            "hidden": true
          },
          "attributes": "href=\"#\" title=\"Start exploring\""
        }
      }
    },
    {
      "name": "fullpage-scroller",
      "heroClass": "hero--fullpage-scroller",
      "context": {
        "button": {
          "name": "icon-after-light",
          "tag": "a",
          "class": "button--transparent border-white rounded-w25",
          "icon": {
            "id": "angle-down",
            "title": "arrow-right",
            "class": "button__icon"
          },
          "attributes": "href=\"#\" title=\"Start exploring\"",
          "text": "Start exploring"
        },
        "heroClass": "hero--secondary",
        "buttonSecondary": {
          "name": "icon-after-light",
          "class": "button--transparent border-white rounded-w25",
          "tag": "a",
          "text": "Button Icon after",
          "icon": {
            "id": "arrow-down",
            "title": "Arrow Right",
            "class": "button__icon",
            "hidden": true
          },
          "attributes": "href=\"#\" title=\"Start exploring\""
        }
      }
    },
    {
      "name": "fullpage-usps",
      "heroClass": "hero--fullpage-usps",
      "context": {
        "button": {
          "name": "icon-after-light",
          "tag": "a",
          "class": "button--transparent border-white rounded-w25",
          "icon": {
            "id": "angle-down",
            "title": "arrow-right",
            "class": "button__icon"
          },
          "attributes": "href=\"#\" title=\"Start exploring\"",
          "text": "Start exploring"
        },
        "heroClass": "hero--secondary",
        "buttonSecondary": {
          "name": "icon-after-light",
          "class": "button--transparent border-white rounded-w25",
          "tag": "a",
          "text": "Button Icon after",
          "icon": {
            "id": "arrow-down",
            "title": "Arrow Right",
            "class": "button__icon",
            "hidden": true
          },
          "attributes": "href=\"#\" title=\"Start exploring\""
        }
      }
    }
  ]
}
  • Content:
    $hero-secondary__heading--font-style             : normal !default;
    $hero-secondary__heading--font-family            : $font-family-heading !default;
    $hero-secondary__heading--font-weight            : $font-weight-bold !default;
    $hero-secondary__heading--font-size              : $font-size-heading-larger !default;
    $hero-secondary__heading--font-size\@large       : $font-size-heading-largest !default;
    $hero-secondary__heading--line-height            : normal !default;
    $hero-secondary__heading--line-height\@large     : 110% !default;
    $hero-secondary__heading--color                  : $white !default;
    //$hero-secondary__heading--text-shadow            : 2px 2px 7px $bg-color-dark !default;
    $hero-secondary__heading--text-shadow            : none !default;
    $hero-secondary__heading--max-width              : 768px !default;
    $hero-secondary__heading--second--max-width      : 1024px !default;
    
    $hero-tertiary__heading--second--font-family     : $font-family-base !default;
    $hero-tertiary__heading--second--font-size       : $font-size-heading !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             : $theme-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 {
        width: 100%;
        display: grid;
        z-index: 1;
        height: 100vh;
    
        &__page {
            width: 100%;
            display: grid;
            z-index: 1;
            height: 70vh;
            &--image {
                grid-area: 1/-1; //sass-lint:disable-line space-around-operator
                z-index: 2;
                &--picture {
                    display: block;
                    height: 70vh;
                }
                &__asset {
                    border-radius: 0;
                    bottom: 0;
                    display: block;
                    float: none;
                    inset-inline-start: 0;
                    margin-inline-end: 0;
                    margin-inline-start: 0;
                    margin-top: 0;
                    max-width: none;
                    min-width: 0;
                    object-fit: cover;
                    object-position: center center;
                    opacity: 1;
                    position: static;
                    top: 0;
                    transform: none;
                    visibility: visible;
                    width: 100%;
                    height: 70vh;
                }
            }
            &--objectfit-position {
                &--center {
                    object-position: 100% 50%;
                }
            }
            &--content {
                align-items: flex-start;
                display: flex;
                flex-flow: column nowrap;
                grid-area: 1/-1;
                //margin: 0 auto;
                text-align: center;
                z-index: 3;
                justify-content: center;
                width: 100%;
    
                &-end {
                    position: absolute;
                    width: 100%;
                    bottom: 0;
                }
            }
            &--usps {
                height: auto;
                background: transparent;
    
                ul {
                    height: 100%;
                    @include mq($screen-m) {
                        height: auto;
                    }
                }
            }
        }
    
        &--primary {
            display: flex;
            flex-direction: column;
            padding: 0;
    
            @include mq($screen-m) {
                position: relative;
            }
            &__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;
            overflow: hidden;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            background: linear-gradient(90deg, #444 1.5%, rgba(31, 27, 26, 0) 110%);
            grid-area: overflow;
            position: relative;
            @include mq($screen-m) {
                flex-direction: row;
            }
    
            .desktop.bottom {
                padding-right: 0;
                padding-bottom: 0;
                @include mq($screen-xxl) {
                    padding-bottom: $spacer--medium;
                }
    
                ul {
                    width: 100%;
                    @include mq($screen-xxl) {
                        width: 75%;
                    }
                    @include mq($screen-xxxl) {
                        width: 50%;
                    }
                }
            }
        }
    
        &__text {
            position: relative;
            width: 100%;
            padding: 0 20px;
            @include mq($screen-l) {
                padding: 0;
            }
            .position-absolute {
                left: 40px;
            }
            &--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;
                color: $hero-secondary__heading--color;
                text-shadow: $hero-secondary__heading--text-shadow;
                max-width: $hero-secondary__heading--max-width;
                line-height: normal;
                @include mq($screen-l) {
                    font-size: $hero-secondary__heading--font-size\@large;
                    line-height: $hero-secondary__heading--line-height\@large;
                }
            }
    
            &--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: $theme-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: $theme-second; // sass-lint:disable-line no-vendor-prefixes
            }
    
            &--heading--second {
                font-family: $hero-tertiary__heading--second--font-family;
                font-size: $hero-tertiary__heading--second--font-size;
                color: $hero-tertiary__heading--description-color;
                margin-bottom: 1em;
                letter-spacing: 0.5px;
                max-width: $hero-secondary__heading--second--max-width;
            }
    
            &--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 {
            grid-area: 1/-1;
            display: block;
            &--picture {
                display: block;
                height: 70vh;
            }
        }
        &__objectfit-position--center {
            object-position: 100% 50%;
        }
        &__background {
            grid-area: overflow;
            height: inherit;
    
            & .image {
                object-fit: cover;
                object-position: top;
                height: 100%;
            }
        }
    
        &--secondary {
            display: grid;
            grid-template-areas: "overflow";
            height: auto;
    
            @include mq($screen-l) {
                height: auto;
            }
    
            & .hero__wrapper {
                grid-area: overflow;
                position: relative;
                height: 100vh;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
    
        &--category {
            background-color: $black;
            margin-bottom: $spacer--semi-medium;
    
            @include mq($screen-l) {
                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-l) {
                    overflow: hidden;
                }
            }
    
            &--responsive {
                & .slider__inner {
                    @include mq($screen-l) {
                        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 $theme-primary;
                border-radius: 10px;
    
                @include mq($screen-l) {
                    display: block;
                }
    
                &--left {
                    left: 0;
                }
    
                &--right {
                    right: 0;
                }
    
                &--icon {
                    fill: $theme-primary;
                    width: $spacer--25;
                    height: $spacer--25;
    
                }
            }
        }
    }
    
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: build/components/Organisms/hero/_hero.scss
  • Size: 10.4 KB

There are no notes for this item.