Grid Layers
A fixed height two column gird switches to responsive height with text overlay below the breakpoint.
The image can be configured as an internal/external link denoted by the icon at the top.right.
Graphic Design [2]
Layers
Images
The image is inserted in three sizes for the various devices. The portrait image for phones should be cropped to about 375 wide with the height equal to the container height.
Lazy Load
The images have a lazy loading option which should be used when the item is not in view at page load.
Article Layers
Layout
Two rows each with a two column grid with the option to overlap the image on the header and the text block on the image.
Layout Switched
Switch
The column relative widths can be adjusted to suit the aspect ratio of the image..
Link
The optional CTA (call to action) style link can open internal or external pages..
Overlap Items
Better Design
The EverWeb ThemeKit Graphic Design Article Layers widget shown above has three overlapping layers which create good content separation and a unique design.
Layout
The item has two rows - a header and a content grid - each with two columns.
The header has an h1 heading with options to add a text shadow and letter spaing to thicken up Google hosted fonts with only one font weight.
The content gris has an image with alt text and a lazy loading function and a text block with heading, text, styled spans and an optional internal/external link.
Overlapping
The image can overlap the header and the overlap amount is set in pixels. The article can overlap the image and the overlap amount is a percentage using a slider.