The Background Image Banners component allows you to create striking hero banners featuring a full-width background image, overlaid with a title, content, and an optional button. You can also include a background colour around the content section for added contrast.
This component offers a variety of configuration options, grouped into the following categories:
| Settings |
This section includes general settings shared across all components in the system:
- Hide on Mobile/Tablet/Desktop: Pick whether to hide, or show this component independently on mobile, tablet, and desktop resolutions via a set of three checkboxes.
- Desktop/Mobile Padding: Adjust the top and bottom padding for both desktop and mobile views.
- Section Background Colour: Choose from a pre-configured list of brand colours for the background.
- Section Alignment: Determines the alignment of the text pod (title, content, and button) in relation to the overall banner.
|
| Animation |
Administrators can choose how the banner appears when the page loads. The seven available entrance animations are:
- None
- Slide in from the top
- Slide in from the bottom
- Slide in from the left
- Slide in from the right
- Fade in
- Grow in
|
| Pod Styling |
This section allows you to customise the appearance of the content pod (the container for the title, content, and button). Options include:
- Pod Background Colour: Set the background colour for the content pod. Selecting ‘none’ allows the content to sit directly on top of the background image. Colours are based on a pre-configured list of brand colours.
- Text Alignment: Choose the alignment of the text within the content pod. This is different from Section Alignment, which controls the pod’s position relative to the banner.
- Title Colour: Set the colour of the title text, with options from the brand colours palette.
- Title Style: Choose the heading size for the title, with options ranging from Heading 1 to Small Paragraph.
- Text Colour: Select the colour for the content paragraph text, again from the brand colour list.
- Button Colour: Set the colour for the optional button, using brand colours.
- Button Style: Choose from several button styles, including Solid, Outline, Outline with Slide Animation, Underline, and Underline Pulse Animation.
|
| Content |
In this section, administrators can define the content fields for the banner:
- Image: Set the background image for the section. If no image is selected, the background colour from the settings tab will be used.
- Title: Enter the title text for the banner.
- Content: Add content for the banner, with support for rich formatting such as bold, italics, links, bullet points, numbered lists, and text colour changes.
- CTA: Add an optional button below the title and content. You can configure the button’s label, link, and choose whether the link opens in a new tab or the same tab.
|
You can view examples of Background Image Banners with different styles and animations here.
