district base

<div class="layout-text-on-image layout-text-on-image--middle paragraph paragraph__layout-text-on-image paragraph--type-layout-text-on-image paragraph--view-mode-default text-on-image" style="max-width: 100%;">
 <div class="text-on-image__image js-img-to-bg" style="background-image: url(https://picsum.photos/1300/867);">
   <img src="https://picsum.photos/1300/867" width="1300" height="867" class="image-style-max-1300x1300" style="visibility: hidden;">
 </div>
 <div class="text-on-image__content">
   <div class="text-on-image__content--inner">
     <div class="clearfix text-formatted field field--name-field-body field--type-text-long field--label-hidden field__item">
       <h2>This is a text on image component</h2>
       <p>This can help break up content and add additional colour to your page</p>
     </div>
     <a href="#" class="button button--secondary">Find out more</a>
   </div>
 </div>
</div>