Hero: Image 50 

<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>
 
<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)-wave.jpg",
    "alt": "Alternative text",
    "rwd": [
      {
        "srcset": "/assets/img/content/1920x960(2_1)-wave.jpg",
        "size": "(min-width: 1920px)"
      },
      {
        "srcset": "/assets/img/content/1600x800(2_1)-wave.jpg",
        "size": "(min-width: 1600px)"
      },
      {
        "srcset": "/assets/img/content/1280x853(3_2)-wave.jpg",
        "size": "(min-width: 1280px)"
      },
      {
        "srcset": "/assets/img/content/1024x683(3_2)-wave.jpg",
        "size": "(min-width: 1024px)"
      },
      {
        "srcset": "/assets/img/content/800x800(1_1)-wave.jpg",
        "size": "(min-width: 800px)"
      },
      {
        "srcset": "/assets/img/content/600x800(3_4)-wave.jpg",
        "size": "(min-width: 600px)"
      },
      {
        "srcset": "/assets/img/content/480x640(3_2)-wave.jpg",
        "size": "(min-width: 480px)"
      }
    ],
    "fallback": {
      "url": "/assets/img/content/1600x800(2_1)-wave.jpg"
    }
  },
  "video": {
    "url": null,
    "poster": null
  },
  "size": "50",
  "content": {
    "title": "Hero size 50 (image)",
    "lead": "This hero is at least 50% of viewport height",
    "cta": {
      "text": null,
      "skin": "primary",
      "size": "large",
      "classes": [
        "kx-hero__cta"
      ]
    },
    "align": "center"
  },
  "classes": null
}

There are no notes for this item.