Lazy Loading Hero Banner
The hero images are full width, fixed height and are inserted using the CSS "object-fit"selector to allow them to cover the full width and remain centered with no distortion.
The images are inserted in an HTML figure element to allow the overlay text to be inserted.
The text is in an article element with with options for an h1 and h2 heading and a CTA style tab link. These are centered horizontally using a wrapper and vertically using CSS transform to translate the item on the Y axis and the vertical spacing between the items can be adjusted.
Lazy Loading
When several of these fairly large images are inserted on a web page, the download will suffer. The jQuery Lazy plugin is used to prevent the images from loading until the visitor scrolls them into the viewport.
If the images are spaced with text blocks only the first one or two will download along with the rest of the page content.
Page Content
This page uses the Hero Text Content widget to insert the text block. Since all the items are full width, fixed height, any combination of Hero widgets can be used to create a responsive page suitable for viewing on computers. laptops and tablets.
Styles
The h1 and h2 headings and the link tab can all be turn on/off individually and their font size, color, background and its opacity and border can all be styled individually.
The items share the same font which can be web safe or non web safe or Google hosted with a websafe fallback.
The h1 heading has controls for letter spacing, font style and weight and for adding a text shadow.
The h2 also has a letter spacing control.
The link tab has an option for adding a hover color which is also applied to the border if implemented.