Image + Content Banners

The ‘Banner – Image + Content’ component allows administrators to display text and an image side by side within a pod.

Administrators have the ability to choose whether to display the image on the left or right of the pod. They may also independently choose whether to display the image above, or beneath the content when on mobile resolutions.

Section background colour, as well as pod background colour, may both be changed independently of one another. The pod’s width is also configurable, with 4 width options to choose from.

The below example shows content on the right of the pod, and an image on the left. Text alignment may also be adjusted; in this case text has been aligned to the centre of its allocated space.

The below example shows content on the right of the pod aligned to the right of its allocated space. Unlike the above example, while the image is aligned to the left on desktop devices, it has been set to be displayed beneath the text on mobile devices.

The following example demonstrates an image visible on the right hand side on desktop devices, but displayed above content on mobile devices.

This example is also being used to showcase a different button style for the associated CTA.

The following examples demonstrate the four different section widths available for this component.

i.e. Widest, Wide, Narrow, and Narrowest.