<section class="hero-image text-gray-700 body-font">
    <div class="relative">
        <div class="">
            <div class="relative sm:overflow-hidden">
                <div class="hero-slider hero-slider--responsive hero-js-slider" data-mage-init='{ "hero-slider": {} }'>
                    <div class="hero-slider__button slider__button--left hero-js-slider-control hero-js-left">
                        <svg class="icon " role="img">
        <title>Angle down icon</title>
    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>

                    </div>
                    <div class="hero-slider__inner hero-js-slider-area">
                        <div class="hero ">
                            <div class="hero__wrapper container">
                                <div class="hero__text">
                                    <h1 class="hero__text--head--title">
                                        hulpmiddelen kopen
                                    </h1>

                                    <h4 class="hero__text--head--description">

                                    </h4>

                                    <a class="button button--fluid" href="#" title="I am a link button">
    Over ons
</a>

                                </div>

                                <div class="hero__image">
                                    <div class="lazyload-wrapper ">
                                        <img class="image lazyload " src="" data-src="/images/banner/visual.png" alt="">
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="hero ">
                            <div class="hero__wrapper container">
                                <div class="hero__text">
                                    <h1 class="hero__text--head--title">
                                        kom naar onze fysieke winkel!
                                    </h1>

                                    <h4 class="hero__text--head--description">

                                    </h4>

                                    <a class="button button--fluid" href="#" title="I am a link button">
    Over ons
</a>

                                </div>

                                <div class="hero__image">
                                    <div class="lazyload-wrapper ">
                                        <img class="image lazyload " src="" data-src="/images/banner/visual.png" alt="">
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="hero-slider__button hero-slider__button--right hero-js-slider-control hero-js-right">
                        <svg class="icon " role="img">
        <title>Angle down icon</title>
    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="hero-image text-gray-700 body-font">
    <div class="relative">
        <div class="{{ class }}">
            <div class="relative sm:overflow-hidden">
                <div class="hero-slider hero-slider--responsive hero-js-slider" data-mage-init='{ "hero-slider": {} }'>
                    <div class="hero-slider__button slider__button--left hero-js-slider-control hero-js-left">
                        {{ render '@icon' left.icon}}
                    </div>
                    <div class="hero-slider__inner hero-js-slider-area">
                        {{#each sliders }}
                            {{ render '@hero' this merge=true }}
                        {{/each}}
                    </div>
                    <div class="hero-slider__button hero-slider__button--right hero-js-slider-control hero-js-right">
                        {{ render '@icon' right.icon}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{
  "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\""
        }
      }
    },
    {
      "name": "location",
      "heroClass": "hero--location",
      "context": {
        "heroClass": "hero",
        "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\""
        }
      }
    },
    {
      "name": "slider"
    }
  ],
  "sliders": [
    {
      "heroImage": {
        "dataSrc": "/images/banner/visual.png"
      },
      "heroBackground": {
        "dataSrc": "/images/banner/visual_second.jpg"
      },
      "heroTitle": "hulpmiddelen kopen",
      "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"
      }
    },
    {
      "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"
      }
    }
  ]
}
  • 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             : $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 {
        &--advanced {
            display: flex;
            flex-direction: column;
            padding: 0;
    
            @include mq($screen-m) {
                position: relative;
                margin: $spacer--semi-medium 0;
            }
            .hero--secondary {
                @include mq($screen-l) {
                    max-height: 465px;
                }
            }
            &__cols {
                @include mq($screen-l) {
                    max-width: 500px;
                    padding-right: 10px;
                }
            }
            &__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%);
            &.no-shadow {
                background: transparent;
            }
            @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: $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: $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;
            border-radius: 1rem;
    
            @include mq($screen-m) {
                height: 465px;
            }
    
            & .hero__wrapper {
                grid-area: overflow;
                position: relative;
            }
            & .hero__background {
                border-radius: 1rem;
                .image {
                    border-radius: 1rem;
                    img {
                        max-width: 780px;
                        border-radius: 1rem;
                    }
                }
            }
        }
    
        &--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 $theme-primary;
                border-radius: 10px;
    
                @include mq($screen-m) {
                    display: block;
                }
    
                &--left {
                    left: 0;
                }
    
                &--right {
                    right: 0;
                }
    
                &--icon {
                    fill: $theme-primary;
                    width: $spacer--25;
                    height: $spacer--25;
    
                }
            }
        }
        &-3image {
            max-width: 75px;
            @include mq($screen-m) {
                max-width: 125px;
            }
            img {
                height: auto;
                max-width: 75px;
                border-radius: 6px;
                @include mq($screen-m) {
                    max-width: 125px;
                }
            }
        }
        //sass-lint: disable no-important
        &--location {
            margin: 0 !important;
    
            .hero {
                &__wrapper {
                    border-radius: 15px;
                    overflow: hidden;
                    background: none;
                }
                &__background {
    
                }
            }
        }
        //sass-lint: enable no-important
    }
    
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: build/components/Organisms/hero/_hero.scss
  • Size: 8.1 KB

There are no notes for this item.