Hero Modules

The widget creates three side by side modules in an HTML5 section element. Each module is in a responsive div which occupies one third of the width.
The section is centered in the browser with 100% width, a maximum width setting and a fixed height. It will remain responsive down to the width of an iPad in portrait mode.
Images
The images have alt text, are centered in the container and have a control for adjusting their percentage width. If the images aren't required, reduce the width to zero.
There is a control for turning a square image round or a rectangular one oval.
Text
Each module has a heading and a text field. Note how all the modules maintain the same height even though the text content isn't uniform. This is achieved by using the jQuery matchHeight plugin.
The text can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
The heading has controls for font size, color and text align while the text has font size, color, line height and text align options of left, center, right and justified.
Links
The optional info links are used rather than configuring the images as links. This is because, when they appear on tablet devices, image links are not obvious since there is no hover to indicate that the image is a link.
The links can be styled for background color and its opacity, font color and hover color.
Modules
The modules have controls for border width, color and radius and box shadow radius and color. The background color can be set and its opacity adjusted so that the module can float over a full width, fixed height image if required.
Vertical Center
When the widget height is adjusted, it will be noticed that the modules are vertically centered in it. This is to allow extra height at narrow browser settings if the modules have a lot of text and may tend to overflow the widget's bottom boundary.
After setting up the widget test the page in the browser's responsive mode or the iOS Simulator to make sure it is set up properly for tablets in portrait mode.