Hero

HTML

<div class="kx-hero kx-hero--50 kx-objectfit">
    <picture class="kx-hero__poster">
        <source srcset="../../assets/img/content/1920x960(2_1)-wave.jpg" media="(min-width: 1920px)">
        <source srcset="../../assets/img/content/1600x800(2_1)-wave.jpg" media="(min-width: 1600px)">
        <source srcset="../../assets/img/content/1280x853(3_2)-wave.jpg" media="(min-width: 1280px)">
        <source srcset="../../assets/img/content/1024x683(3_2)-wave.jpg" media="(min-width: 1024px)">
        <source srcset="../../assets/img/content/800x800(1_1)-wave.jpg" media="(min-width: 800px)">
        <source srcset="../../assets/img/content/600x800(3_4)-wave.jpg" media="(min-width: 600px)">
        <source srcset="../../assets/img/content/480x640(3_2)-wave.jpg" media="(min-width: 480px)">
        <img class="kx-hero__img kx-objectfit__img" src="../../assets/img/content/1600x800(2_1)-wave.jpg" data-fallback="../../assets/img/content/1600x800(2_1)-wave.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 50 (image)
                </h1>

                <p class="kx-hero__lead">This hero is at least 50% of viewport height</p>

            </div>
        </div>
    </div>
</div>

View

<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>