404 Hero 

<div class="error-hero" data-module="errorHero">
    <div class="error-hero__background">
        <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
            <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1500595046743-cd271d694d30?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;100&amp;q&#x3D;10" alt="Alt Text">
            <picture class="image__container">
                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1500595046743-cd271d694d30?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;640&amp;q&#x3D;80" />
                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1500595046743-cd271d694d30?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" />
                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1500595046743-cd271d694d30?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" />
                <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1500595046743-cd271d694d30?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" alt="Alt Text">
            </picture>
        </figure>
    </div>
    <div class="error-hero__inner">
        <div class="grid-container">
            <div class="error-hero__content grid-x grid-padding-x">
                <div class="cell medium-8 medium-offset-2">
                    <p class="error-hero__eyebrow">Page not found (404 error)</p>
                    <h1 class="error-hero__title">The headline copy</h1>
                    <p class="error-hero__subtitle">Lorem ipsum sit amet, consectetur adipiscing elit. Mauris malesuada fermentum sagittis. Donec blandit ornare libero. Sed tempor vel enim ut efficitur.</p>
                    <a href="#" class="button-p1 button-p1--with-icon  " role="button">Cta</a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="error-hero" data-module="errorHero">
    <div class="error-hero__background">
        {{#if fullVideo}}
            {{> @cp-medium-video isYouTube=fullVideo.isYouTube isYouku=fullVideo.isYouku video=fullVideo.video autoplay=true hideControls=true loop=true }}
        {{else}}
        {{> @cp-medium-image backgroundResponsiveImage}}
        {{/if}}
    </div>
    <div class="error-hero__inner">
        <div class="grid-container">
            <div class="error-hero__content grid-x grid-padding-x">
                <div class="cell medium-8 medium-offset-2">
                    {{#if eyebrow}}
                        <p class="error-hero__eyebrow">{{eyebrow}}</p>
                    {{/if}}
                    <h1 class="error-hero__title">{{title}}</h1>
                    {{#if subtitle}}
                        <p class="error-hero__subtitle">{{subtitle}}</p>
                    {{/if}}
                    {{> @cp-button-primary target=button.target url=button.url text=button.text modifier="with-icon" }}
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "eyebrow": "Page not found (404 error)",
  "title": "The headline copy",
  "subtitle": "Lorem ipsum sit amet, consectetur adipiscing elit. Mauris malesuada fermentum sagittis. Donec blandit ornare libero. Sed tempor vel enim ut efficitur.",
  "backgroundResponsiveImage": {
    "altText": "Alt Text",
    "lowResolutionUrl": "https://images.unsplash.com/photo-1500595046743-cd271d694d30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=10",
    "fallbackImageUrl": "https://images.unsplash.com/photo-1500595046743-cd271d694d30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
    "sources": [
      {
        "type": "image/jpeg",
        "largeUrl": "https://images.unsplash.com/photo-1500595046743-cd271d694d30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
        "smallUrl": "https://images.unsplash.com/photo-1500595046743-cd271d694d30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
      }
    ]
  },
  "button": {
    "url": "#",
    "text": "Cta"
  }
}

There are no notes for this item.