The image with alt text and optional caption is inserted is in an HTML5 <figure> element.
The text with optional SVG icon and link is in an HTML5 <article>.
The item position can be switched and the text can be above or below the image on browser/device screen widths below the break point.
The relative column widths can be adjusted and the image can have a border and/or an offset box shadow.
Dividing text into smaller blocks makes them easier to find and read.
The container has a CSS grid layout which encloses two HTML5 <article> elements.
Content
Each article has a heading, text and an optional CTA style link tab which can open internal or external pages and has a new window option.
Spans
Spans have their own controls for font size and color and are inserted using a span code - <span>Span Text</span>.
Note how the relative widths of the columns can be adjusted to suit the amount of text content and keep them relayively even in height.
Mobile Layout
On screen widths below the break point the grid becomes a single column so the right column sits below the left.
The ThemeKit Design download folder contains 100s on SVG icons.
Choose an icon, double click it to open in TextEdit.app set to plain text mode, copy the code and paste it into the widget settings.
The ThemeKit Text Module should be used to replace the EverWeb default text box which is not really suitable for responsive page designs.
The text is contained in an HTML5 <article> element and has an optional heading, text, span styles and optional links.
Background
The background is full width and has the option to be a two color gradient with a control for grasient angle to bring it in line with the other ThemeKit Block widgets.
Links
Text links are not user friendly for mobile device users and are less likely to be clicked than separate CTA(Call To Action) style links.
The module has the option for up to three links. These can be configured to open internal or external pages and have a new windwo option.
The links can be "Apple" style with a trailing double chevron or block links with a contrasting background and a border radius control.
Spans
Spans can be inserted for emphasis or as sub headings and there are controls for setting their font size and color.