Hero Switch

A hero item has full width and a fixed height which looks fine on a computer/laptop screen but not so good on tablets and phones. A better approach is to have a fixed height with the object-fit selector set to "cover" above the break point and to change an auto height container with the image object fit property set to "fill.".

Images

The image is insserted in three sizes for optimal performance on mobile devices and have a lazy loading option.
The images in the the demo were cropped to size and optimised before importing into EverWeb.
They are …

• Large Image: 1200 x 720px - file size 120KB
• Medium Image: 800 × 720 px - file size 90KB
• Small Image: 375 × 540px - file size 36KB

Article

The article element has a heading, optional styled span, text and the option for one or more internal/external links.
The article has a control to set its horizontal align abover the breakpont, Below the breakpoint the article is centered.
There also controls to set the articles vertical position on conputer, tablet and phone portrait along with a control for vertical inset.