Background Image Banners

The following example presents a text pod aligned to the right of the component, whilst text within that pod is aligned to the left.

The pod is rounded, based on globally configurable brand settings.

In the below use case, text is still aligned to the left of the pod, however in this instance, the pod is now aligned to the centre of the component.

In this case, the content pod is now aligned to the top-left of the component. Note that in the background image has been replaced with a solid background colour, which was set from a list of pre-configured, globally set brand colours.

The final example showcases text aligned to the centre of the pod; rather than left as was the case in all the above examples.

The pod is further aligned to the centre of the component, and has had its background colour set to ‘none’ which as a result, sets a transparent pod background, and removes the pod’s drop-shadow.