Hero

<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 class="hero {{ heroClass }}">
    <div class="hero__wrapper container">
        <div class="hero__text">
            <h1 class="hero__text--head--title">
                {{ heroTitle }}
            </h1>

            <h4 class="hero__text--head--description">
                {{ heroDescription }}
            </h4>

            {{ render '@button--secondary' button }}
        </div>

        <div class="hero__image">
            {{ render '@image' heroImage }}
        </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             : $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;
            }
            .flex {
                flex-direction: column;
                @include mq($screen-l) {
                    flex-direction: row;
                }
            }
            &__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: $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;
    
            @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;
            }
        }
        &-image {
            height: 250px;
            position: relative;
            @include mq($screen-l) {
                height: 515px;
                display: block;
            }
            &__shadow {
                height: 100%;
                width: 100%;
                position: absolute;
                background-image: linear-gradient(100deg, rgba(0, 0, 0, 0.2) 20%, rgba(0, 154, 125, 0) 100%);
            }
            &__picture {
                img {
                    height: 100%;
                    object-fit: cover;
                }
            }
            &.width-full {
                @include mq($screen-l) {
                    width: 75% !important; // sass-lint:disable-line no-important
                }
            }
            &__width-text {
                display: grid;
                grid-template-areas: "overflow";
                width: 100% !important; // sass-lint:disable-line no-important
                @include mq($screen-l) {
                    width: 50% !important; // sass-lint:disable-line no-important
                }
    
            }
            &:not(&.hero-image__width-text) .hero-image__text {
                &.align-left {
                    display: none;
                }
            }
            &__picture,
            &__text {
                grid-area: overflow;
                height: inherit;
                position: relative;
            }
            &__text {
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 2rem;
                @include mq($screen-l) {
                    padding: 5rem;
                }
                @include mq($screen-xl) {
                    padding: 7rem;
                }
                &.align {
                    &-left {
                        align-items: self-start;
                        h1 {
                            color: $theme-tertiary;
                            font-weight: bold;
                            margin-bottom: 0.2em;
                            font-size: 20px;
                            @include mq($screen-s) {
                                font-size: 24px;
                            }
                            @include mq($screen-l) {
                                font-size: 32px;
                            }
                        }
                        p {
                            font-size: 14px;
                            @include mq($screen-s) {
                                font-size: 16px;
                            }
                        }
                    }
                    &-center {
                        align-items: center;
                    }
                    &-right {
                        align-items: self-end;
                    }
                }
            }
        }
    
        // ==============
        // 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-tertiary;
                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;
    
                }
            }
        }
    }
    
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: build/components/Organisms/hero/_hero.scss
  • Size: 9.5 KB

There are no notes for this item.