Grid Article
This is a two column and three row grid layout with a column ratio of 2:1 on screen widths above the breakpoint. This article element with the text is optional.
The main image is in column one and spans two rows. The satellite images are in column two and each occupy one row.
Images
Each image has the option for a caption and to be configured as an internal link. The link icon appears at the top right and the caption can appear on hover if required.
The images can be lazy loaded if they are not in the viewport at page load.
The images can have a border and are spaced out using the grid gap control. In this example the grid padding is set to the same value as the gap.
Article
The optional text area has a heading, text, styled spans and an optional CTA 9call to action) style internal/external link with a new window option.
Text Width
When text becomes wider than about 100px it becomes more difficult for the eye to jump from the end of a line to the begining of the next. To overcome this the text area can be centered with a maximum width setting.