Zurn Elkay Standard Teaser

Standard Teasers are quite flexible. They are fully responsive. Wider than 768 pixels the image is used as a background with the copy overlaying it. There are various styles and widths for the copy block. 

To ensure the image is as fully visible as you need, you can use min-height classes h-min-500 or (with breakpoints) h-min-xxlarge-600, etc. 

Up to 768 pixels the image displays, with the teaser text block below it.

You can also set the image width, for when you want to display a teaser at less than full width on the page. This prevents loading full-width images for a teaser that only takes up part of the page width. 

Background images are also (automatically) fully responsive.

It is also possible to provide different images at various breakpoints. For a screen at full width, you may want a differently cropped image than at 1200 pixels wide.

Below are examples of various settings and styles.

Adobe Core Teaser

Standard Teasers are quiteAdobe Core Teaser V1 will remain available. It has been used many times on our existing sites. It displays the image with the copy styled as an overlay, on all breakpoints. Please note that on smaller screen widths, as the image shrinks smaller, these teasers' text (which is absolutely positioned over the image) may extend beyond the image and be illegible or cover other components on your page.

Adobe Core Teaser V2 has a few extra features. You can link to an existing AEM page and use that page's feature image (set in the page properties) as the teaser image. 

You have some styling options with the style brush.