Online Slaapcomfort components for Magento 2

Hero: Secondary 

<div class="hero hero--secondary">
    <div class="hero__wrapper">
        <div class="hero__text container">
            <h1 class="hero__text--heading--first">
                <span>ONLINE</span>
                <span class="hero__text--color">SLAAPCOMFORT</span>
            </h1>
            <h4 class="hero__text--heading--second">
                Lekker man
            </h4>
            <button class="button " type="button" aria-label="button">
                I am a button
            </button>

        </div>
    </div>
    <div class="hero__background">
        <picture class="image ">
            <img src="/images/banner/visual_second.jpg" alt="">
        </picture>

    </div>
</div>
 
<div class="hero hero--secondary">
    <div class="hero__wrapper">
        <div class="hero__text container">
            <h1 class="hero__text--heading--first">
                <span>ONLINE</span>
                <span class="hero__text--color">SLAAPCOMFORT</span>
            </h1>
            <h4 class="hero__text--heading--second">
                Lekker man
            </h4>
            {{ render '@button' buttonSecondary }}
        </div>
    </div>
    <div class="hero__background">
        {{ render '@image--no-lazyload' heroBackground }}
    </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.