Image With Overlay 

<div class="image-with-overlay" data-module="imageWithOverlay">
    <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-1543748624-61a84917186f?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-1543748624-61a84917186f?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-1543748624-61a84917186f?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-1543748624-61a84917186f?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="" alt="Alt Text">
        </picture>
    </figure>
    <div class="image-with-overlay__container">
        <div class="grid-x">
            <div class="cell medium-7 medium-offset-1 large-offset-2 large-5">
                <h2 class="image-with-overlay__title">Title</h2>
                <p class="image-with-overlay__subline">Praesent consectetur ullamcorper lectus et venenatis. Curabitur aliquam malesuada dui ac tincidunt.</p>
                <a href="#" class="button-p1 button-p1--with-icon  " role="button">Primary</a>
            </div>
        </div>
    </div>
</div>
 
<div class="image-with-overlay" data-module="imageWithOverlay">
    {{#if image}}
    {{> @cp-medium-image image }}
    {{/if}}
    <div class="image-with-overlay__container">
        <div class="grid-x">
            <div class="cell medium-7 medium-offset-1 large-offset-2 large-5">
                <h2 class="image-with-overlay__title">{{title}}</h2>
                <p class="image-with-overlay__subline">{{subtitle}}</p>
                {{#if button}}
                {{> @cp-button-primary target=button.target url=button.url text=button.text modifier="with-icon" }}
                {{/if}}
            </div>
        </div>
    </div>
</div>
 
{
  "button": {
    "url": "#",
    "text": "Primary"
  },
  "image": {
    "altText": "Alt Text",
    "lowResolutionUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=10",
    "sources": [
      {
        "type": "image/jpeg",
        "largeUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
        "smallUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
      }
    ]
  },
  "title": "Title",
  "subtitle": "Praesent consectetur ullamcorper lectus et venenatis. Curabitur aliquam malesuada dui ac tincidunt."
}

There are no notes for this item.