The below example demonstrates what the Header + Content Banner component would look like when content is aligned to the left.

An optional logo has also been added above the h1 sized title while the optional CTA is directing users to an external website in a new tab.

CTA style, colour, label, link, and target (new tab / same tab) are fully configurable via the CMS.

The below example is a slight alteration to the above. In this case, the heading size is slightly smaller, button style has been adjusted, and the icon above the component’s heading has been removed.

A third example with a similar style. In this case, we are using an H3 and a slightly different hover effect on the CTA.

The component’s width has also been made slightly narrower, further indenting the content.

Text alignment within the component may be adjusted. In the below case, content is aligned to the right.

The heading size is again slightly smaller, whilst the button style has now changed to an animated underline.

The below features a centre aligned heading; and content.

This component type offers two WYSIWYG content sections beneath the heading, a regular paragraph, as displayed below, as well as a ‘lead’ paragraph, which would be slightly larger, and displayed between the heading, and content sections.

This component type also allows users to add an eyebrow header above the main heading, as demonstrated below.

Text and background colours are configurable based on preset brand colours.

In the below example, the background colour is darker, whilst text colours have been changed to show more clearly on the darker background.

All of the component’s fields are optional. The below demonstrates a use-case where the heading has been left empty, and we are instead showcasing a ‘lead’ paragraph beneath the component’s logo.

The below example demonstrates a more populated version of this component, with eyebrow header, heading, lead paragraph section, and a button.

Unlike other buttons above, this example’s CTA opens within the same tab instead of in a new tab; which is ideal when linking to other pages within the same website.