Kistenkoning components for Magento 2

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;
            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: $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;
        }
    }
    // ==============
    // 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;

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