Responsive Side Info Widget

These widgets have an image, heading, text and a CTA style link. The image has alt text and can be positioned left or right.
On computers and tablets in landscape mode, the image and the info section sit side by side. On narrower devices, the layout switches so that the info section sits below the image. The break point at which the layout switch takes place can be set for tablet in potrait mode (799px), mobile phone in landscape mode(739px) or phone in portrait mode (599px).
The container can be styled with a border and vertical spacing can be applied.
Links
The links can be configured to open an internal or external page and in a new window if required.
They can be styled for font size, color, hover color, background color, padding and border width, color and radius.
Spans
The text in the info sections with the contrasting color is inserted using a span tag. Find out about spans and how to create them by following the link below.
The span tag is styled in the widget settings for font size, color, style and top/bottom padding. The TB Padding control adjusts the span's vertical spacing when it occupies a line on its own and needs to be distanced from the text.