<div class="hero hero--advanced">
    <div class="flex">
        <div class="hero-image width-full">
            <picture class="hero-image__picture image" data-alt="" data-class="hero__asset hero-image__asset objectfit-position objectfit-position__center" data-iesrc="https://images.prismic.io/snurky/7075f3d7-8657-4385-8920-202d170ba505_dali_01_1.jpg?auto=compress,format&amp;rect=0,86,1200,668&amp;w=1200&amp;h=668">
                <source srcset="https://images.prismic.io/snurky/7075f3d7-8657-4385-8920-202d170ba505_dali_01_1.jpg?auto=compress,format&amp;rect=168,0,867,787&amp;w=477&amp;h=433" media="(max-width: 767px) and (max-width:1023px)">
                <source srcset="https://images.prismic.io/snurky/7075f3d7-8657-4385-8920-202d170ba505_dali_01_1.jpg?auto=compress,format&amp;rect=0,86,1200,668&amp;w=1200&amp;h=668" media="(min-width: 1024px)">

                <img src="https://images.prismic.io/snurky/7075f3d7-8657-4385-8920-202d170ba505_dali_01_1.jpg?auto=compress,format&amp;rect=0,86,1200,668&amp;w=1200&amp;h=668" srcset="https://images.prismic.io/snurky/7075f3d7-8657-4385-8920-202d170ba505_dali_01_1.jpg?auto=compress,format&amp;rect=0,86,1200,668&amp;w=1200&amp;h=668" alt="" class="image hero-image__asset objectfit-position objectfit-position__center" height="668" width="1200" />

            </picture>
        </div>
        <div class="hero-image width-half-full hero-image__width-text">
            <picture class="hero-image__picture image" data-alt="" data-class="hero__asset hero-image__asset objectfit-position objectfit-position__center" data-iesrc="https://images.prismic.io/snurky/7802dcc5-bf66-4f20-bce1-38eea7861ab9_kayori-kobe-dekbedovertrek-114527-2.jpg.webp?auto=compress,format&amp;rect=253,0,652,652&amp;w=668&amp;h=668">
                <source srcset="https://images.prismic.io/snurky/7802dcc5-bf66-4f20-bce1-38eea7861ab9_kayori-kobe-dekbedovertrek-114527-2.jpg.webp?auto=compress,format&amp;rect=253,0,652,652&amp;w=420&amp;h=420" media="(max-width:1023px)">
                <source srcset="https://images.prismic.io/snurky/7802dcc5-bf66-4f20-bce1-38eea7861ab9_kayori-kobe-dekbedovertrek-114527-2.jpg.webp?auto=compress,format&amp;rect=253,0,652,652&amp;w=668&amp;h=668" media="(min-width: 1024px)">

                <img src="https://images.prismic.io/snurky/7802dcc5-bf66-4f20-bce1-38eea7861ab9_kayori-kobe-dekbedovertrek-114527-2.jpg.webp?auto=compress,format&amp;rect=253,0,652,652&amp;w=668&amp;h=668" srcset="https://images.prismic.io/snurky/7802dcc5-bf66-4f20-bce1-38eea7861ab9_kayori-kobe-dekbedovertrek-114527-2.jpg.webp?auto=compress,format&amp;rect=253,0,652,652&amp;w=668&amp;h=668" alt="" class="image hero-image__asset objectfit-position objectfit-position__center" height="668" width="668" />
            </picture>
            <div class="hero-image__shadow"></div>
            <div class="hero-image__text align-left ">
                <h1>Laat Je Dromen Uitkomen: Ontdek Onze Beddencollectie</h1>
                <p>De slaapspecialist bij jou in de omgeving voor ultiem
                    slaapcomfort en dromerige nachten!</p>
                <div class="button-area">
                    <button class="button text-white button-icon hero-button" type="button" data-modal-trigger="side-menu" aria-label="Shop nu" onclick="window.location.href='https://www.snurky.nl/';">
                        <span>Shop nu</span>
                        <svg class="icon fill--light button__icon" role="img">
                            <title>angle-right</title>
                            <use xlink:href="https://www.snurky.nl/static/version1696856922/frontend/FalconMedia/snurky/nl_NL/images/icons-sprite.svg#angle-right"></use>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="hero hero--advanced">
    <div class="flex">
        <div class="hero-image width-full">
            <picture class="hero-image__picture image"
                     data-alt=""
                     data-class="hero__asset hero-image__asset objectfit-position objectfit-position__center"
                     data-iesrc="https://images.prismic.io/snurky/7075f3d7-8657-4385-8920-202d170ba505_dali_01_1.jpg?auto=compress,format&amp;rect=0,86,1200,668&amp;w=1200&amp;h=668">
                <source
                    srcset="https://images.prismic.io/snurky/7075f3d7-8657-4385-8920-202d170ba505_dali_01_1.jpg?auto=compress,format&amp;rect=168,0,867,787&amp;w=477&amp;h=433"
                    media="(max-width: 767px) and (max-width:1023px)">
                <source
                    srcset="https://images.prismic.io/snurky/7075f3d7-8657-4385-8920-202d170ba505_dali_01_1.jpg?auto=compress,format&amp;rect=0,86,1200,668&amp;w=1200&amp;h=668"
                    media="(min-width: 1024px)">

                <img
                    src="https://images.prismic.io/snurky/7075f3d7-8657-4385-8920-202d170ba505_dali_01_1.jpg?auto=compress,format&amp;rect=0,86,1200,668&amp;w=1200&amp;h=668"
                    srcset="https://images.prismic.io/snurky/7075f3d7-8657-4385-8920-202d170ba505_dali_01_1.jpg?auto=compress,format&amp;rect=0,86,1200,668&amp;w=1200&amp;h=668"
                    alt=""
                    class="image hero-image__asset objectfit-position objectfit-position__center"
                    height="668"
                    width="1200"
                />

            </picture>
        </div>
        <div class="hero-image width-half-full hero-image__width-text">
            <picture class="hero-image__picture image"
                     data-alt=""
                     data-class="hero__asset hero-image__asset objectfit-position objectfit-position__center"
                     data-iesrc="https://images.prismic.io/snurky/7802dcc5-bf66-4f20-bce1-38eea7861ab9_kayori-kobe-dekbedovertrek-114527-2.jpg.webp?auto=compress,format&amp;rect=253,0,652,652&amp;w=668&amp;h=668">
                <source
                    srcset="https://images.prismic.io/snurky/7802dcc5-bf66-4f20-bce1-38eea7861ab9_kayori-kobe-dekbedovertrek-114527-2.jpg.webp?auto=compress,format&amp;rect=253,0,652,652&amp;w=420&amp;h=420"
                    media="(max-width:1023px)">
                <source
                    srcset="https://images.prismic.io/snurky/7802dcc5-bf66-4f20-bce1-38eea7861ab9_kayori-kobe-dekbedovertrek-114527-2.jpg.webp?auto=compress,format&amp;rect=253,0,652,652&amp;w=668&amp;h=668"
                    media="(min-width: 1024px)">

                <img
                    src="https://images.prismic.io/snurky/7802dcc5-bf66-4f20-bce1-38eea7861ab9_kayori-kobe-dekbedovertrek-114527-2.jpg.webp?auto=compress,format&amp;rect=253,0,652,652&amp;w=668&amp;h=668"
                    srcset="https://images.prismic.io/snurky/7802dcc5-bf66-4f20-bce1-38eea7861ab9_kayori-kobe-dekbedovertrek-114527-2.jpg.webp?auto=compress,format&amp;rect=253,0,652,652&amp;w=668&amp;h=668"
                    alt=""
                    class="image hero-image__asset objectfit-position objectfit-position__center"
                    height="668"
                    width="668"
                />
            </picture>
            <div class="hero-image__shadow"></div>
            <div class="hero-image__text align-left ">
                <h1>Laat Je Dromen Uitkomen: Ontdek Onze Beddencollectie</h1>
                <p>De slaapspecialist bij jou in de omgeving voor ultiem
                    slaapcomfort en dromerige nachten!</p>
                <div class="button-area">
                    <button class="button text-white button-icon hero-button"
                            type="button"
                            data-modal-trigger="side-menu"
                            aria-label="Shop nu"
                            onclick="window.location.href='https://www.snurky.nl/';">
                        <span>Shop nu</span>
                        <svg class="icon fill--light button__icon" role="img">
                            <title>angle-right</title>
                            <use xlink:href="https://www.snurky.nl/static/version1696856922/frontend/FalconMedia/snurky/nl_NL/images/icons-sprite.svg#angle-right"></use>
                        </svg>
                    </button>
                </div>
            </div>
        </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-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: 9.5 KB

There are no notes for this item.