Hero Blocks
The content is contained in an HTML5 figure element with image, caption and text description.
jQuery match height is used to keep the elements at equal height independent of the quantity of text content.
The image has an alt text attribute and can be configured a a hyperlink to an internal or external page with new window option.
The image can have a border if required.
A grid with rows containing three content blocks can be created by adding more images to the Assets List in the widget settings up to a maximum of 48.
Hero Content & Header Blocks
These widgets create rows of three content blocks. Each widget can create a grid with up to 48 blocks. The blocks are inserted in a wrapper inside a full width container. The wrapper has a setting for maximum width.
At wide browser settings, the blocks will spread out. As the browser or device width is reduced, the space between the blocks is decreased. Like the other Hero widgets, they remain responsive down to the width of an iPad in portrait mode.
Header Block
Image & Text
The quantity of text can be different in each one since the height of the blocks is kept equal using the jquery MatchHeight script.
Link tabs can be pushed to the bottom using HTML5 line breaks <br>
Link Tab
The tab can be aligned left, center or right.