Feature Text on Image

Preview:

Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nesciunt cumque accusamus! Distinctio nulla harum obcaecati quam, pariatur, fugit commodi, sit ad amet neque corrupti qui saepe nam adipisci velit.

Configuration:

Output:

Vue component

            
<FeatureTextOnImage :textPositionBottom="false" :textPositionRight="false" />
            
        

Raw HTML

            
<div class="feature-text-on-image">
  <div class="feature-content">
    <div class="container-squeeze">
      <div class="feature-content-wrapper">
        <h2 class="headline-2 font-weight-bold">Header</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nesciunt cumque accusamus! Distinctio nulla harum obcaecati quam, pariatur, fugit commodi, sit ad amet neque corrupti qui saepe nam adipisci velit.
        </p>
      </div>
    </div>
  </div>
  <div class="feature-image">
    <picture>
      <source media="(min-width: 1440px)" srcset="/_nuxt/src/global/prototype-assets/images/feature-text-on-image/feature-text-on-image-1-lg.jpg">
      <source media="(min-width: 1024px)" srcset="/_nuxt/src/global/prototype-assets/images/feature-text-on-image/feature-text-on-image-1-md.jpg">
      <source media="(min-width: 768px)" srcset="/_nuxt/src/global/prototype-assets/images/feature-text-on-image/feature-text-on-image-1-sm.jpg">
      <source media="(max-width: 767px)" srcset="/_nuxt/src/global/prototype-assets/images/feature-text-on-image/feature-text-on-image-1-xs.jpg">
      <img src="/_nuxt/src/global/prototype-assets/images/feature-text-on-image/feature-text-on-image-1-lg.jpg" alt="">
    </picture>
  </div>
</div>
            
        

Comments

If you forget to set container "size" - it defaults to use <div class="container">