<div class="kx-hero kx-hero--100 kx-objectfit">
    <picture class="kx-hero__poster">
        <source srcset="../../assets/img/content/1920x960(2_1)-cargo.jpg" media="(min-width: 1920px)">
        <source srcset="../../assets/img/content/1600x800(2_1)-cargo.jpg" media="(min-width: 1600px)">
        <source srcset="../../assets/img/content/1280x853(3_2)-cargo.jpg" media="(min-width: 1280px)">
        <source srcset="../../assets/img/content/1024x683(3_2)-cargo.jpg" media="(min-width: 1024px)">
        <source srcset="../../assets/img/content/800x800(1_1)-cargo.jpg" media="(min-width: 800px)">
        <source srcset="../../assets/img/content/600x800(3_4)-cargo.jpg" media="(min-width: 600px)">
        <source srcset="../../assets/img/content/480x640(3_2)-cargo.jpg" media="(min-width: 480px)">
        <img class="kx-hero__img kx-objectfit__img" src="../../assets/img/content/1600x800(2_1)-cargo.jpg" data-fallback="../../assets/img/content/1600x800(2_1)-cargo.jpg" alt="Alternative text">
    </picture>
    <div class="kx-hero__content">
        <div class="kx-hero__content__item">
            <div class="kx-container kx-container--tab-m kx-mx--auto kx-txt-center">
                <h1 class="kx-hero__title">
                    Hero size 100 (image)
                </h1>

                <p class="kx-hero__lead">Some lead text that makes you convinced that this is the right choice</p>

                <!-- LINK AS BUTTON Component -->
                <a class="kx-btn kx-btn--skin-primary kx-btn--size-large kx-hero__cta" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Take the tour</span>
    </span>
</a>

            </div>
        </div>
    </div>
</div>
<div class="kx-hero{% if size %} kx-hero--{{ size }}{% endif %} kx-objectfit{% for class in classes %} {{ class }}{% endfor %}">
    {% if video.url -%}
        <div class="kx-hero__poster">
            <video autoplay loop class="kx-hero__img kx-objectfit__img" muted>
                <source src="{{ video.url | path }}" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
            </video>
        </div>
    {% elseif img.url -%}
        <picture class="kx-hero__poster">
            {% for size in img.rwd -%}
                <source srcset="{{ size.srcset | path  }}" media="{{ size.size }}">
            {% endfor -%}
            <img class="kx-hero__img kx-objectfit__img" src="{{ img.fallback.url | path  }}" data-fallback="{{ img.fallback.url | path  }}" alt="{{ img.alt }}">
        </picture>
    {% endif -%}
    {%- if content.title -%}
        <div class="kx-hero__content">
            <div class="kx-hero__content__item">
                <div class="kx-container kx-container--tab-m kx-mx--auto{% if content.align %} kx-txt-{{ content.align }}{% endif %}">
                    <h1 class="kx-hero__title">
                        {{ content.title }}
                    </h1>
                    {% if content.lead %}
                    <p class="kx-hero__lead">{{ content.lead }}</p>
                    {% endif %}
                    {% if content.cta.text %}
                    {% render '@button', content.cta, true %}
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif -%}
</div>
{
  "img": {
    "url": "/assets/img/content/320x427(3_2)-cargo.jpg",
    "alt": "Alternative text",
    "rwd": [
      {
        "srcset": "/assets/img/content/1920x960(2_1)-cargo.jpg",
        "size": "(min-width: 1920px)"
      },
      {
        "srcset": "/assets/img/content/1600x800(2_1)-cargo.jpg",
        "size": "(min-width: 1600px)"
      },
      {
        "srcset": "/assets/img/content/1280x853(3_2)-cargo.jpg",
        "size": "(min-width: 1280px)"
      },
      {
        "srcset": "/assets/img/content/1024x683(3_2)-cargo.jpg",
        "size": "(min-width: 1024px)"
      },
      {
        "srcset": "/assets/img/content/800x800(1_1)-cargo.jpg",
        "size": "(min-width: 800px)"
      },
      {
        "srcset": "/assets/img/content/600x800(3_4)-cargo.jpg",
        "size": "(min-width: 600px)"
      },
      {
        "srcset": "/assets/img/content/480x640(3_2)-cargo.jpg",
        "size": "(min-width: 480px)"
      }
    ],
    "fallback": {
      "url": "/assets/img/content/1600x800(2_1)-cargo.jpg"
    }
  },
  "video": {
    "url": null,
    "poster": null
  },
  "size": "100",
  "content": {
    "title": "Hero size 100 (image)",
    "lead": "Some lead text that makes you convinced that this is the right choice",
    "cta": {
      "text": "Take the tour",
      "skin": "primary",
      "size": "large",
      "classes": [
        "kx-hero__cta"
      ],
      "href": "#"
    },
    "align": "center"
  },
  "classes": null
}
  • Content:
    // ==========================================================================
    // Component: Hero
    // ==========================================================================
    
    // Elements (children)
    // ==========================================================================
    
    .kx-hero__img {
        @include cover;
        object-fit: cover;
    }
    
    // The media container: <picture>, <video> etc
    .kx-hero__poster {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
    
        &:before {
            @include cover;
            content: '';
            z-index: 1;
            background: linear-gradient(to bottom, $color-hero-bg-grad-top 0%, $color-hero-bg-grad-bottom 100%);
            opacity: 0.5;
    
            @supports (mix-blend-mode: multiply) {
                opacity: 1;
                mix-blend-mode: multiply;
            }
        }
    
        &:after {
            @include cover;
            content: '';
            z-index: 1;
            background-color: $color-hero-bg-overlay;
            opacity: 0.65;
    
            @supports (mix-blend-mode: multiply) {
                background-color: $color-hero-bg-overlay;
                opacity: 0.1;
            }
        }
    }
    
    .kx-hero__title {
        @include type-scale(super);
        color: $color-hero-title-txt;
    }
    
    .kx-hero__lead {
        @include type-scale(medium);
        color: $color-hero-txt;
    
        .kx-hero__title + & {
            @include mt(small);
        }
    
        @at-root {
            p#{&} {
                max-width: none !important;
            }
        }
    }
    
    .kx-hero__cta {
        .kx-hero__title + & {
            @include mt(medium);
        }
    
        .kx-hero__lead + & {
            @include mt(xxlarge);
        }
    }
    
    .kx-hero__content__item {
        width: 100%;
    
        > .kx-container {
            padding-left: gutter() / 2;
            padding-right: gutter() / 2;
        }
    }
    
    // Container for content on top of poster, e.g: Title and/ or text
    .kx-hero__content {
        @include flex;
        @include flex-wrap;
        @include align-items-center;
        @include justify-content-center;
        z-index: 1;
        position: relative;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding: 48px 0;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
    }
    
    // Block (parent)
    // ==========================================================================
    
    .kx-hero {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
    
        @include mq($until: tab-m) {
            .kx-hero__title {
                @include type-scale(xxlarge);
            }
        }
    }
    
    // Modifiers: Size of hero, relative to viewport
    // ==========================================================================
    
    // 100% of viewport height
    .kx-hero--100 {
        min-height: 100vh;
    }
    
    // 75 / 100th of viewport width/ height, whichever is smallest
    .kx-hero--75 {
        min-height: 75vmin;
    }
    
    // 50 / 100th of viewport width/ height, whichever is smallest
    .kx-hero--50 {
        min-height: 50vmin;
    }
    
    // 25 / 100th of viewport width/ height, whichever is smallest
    .kx-hero--25 {
        min-height: 25vmin;
    }
    
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: src\components\01-hero\_hero.scss
  • Size: 3.1 KB

There are no notes for this item.