The Heading and Content Banners component allows you to create simple, text-based banners, ideal for use as hero banners on text-heavy pages or as “further reading” banners within landing pages. The hero banner on this page is built using this very component.
This component offers a variety of configuration options, organised into the following categories:
| Settings |
This section includes general settings that apply 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 a background colour from a pre-configured list of brand colours.
- Section Width: Set the width of the component’s content.
- Section Alignment: Determine the alignment of the banner’s content (left, centre, or right).
|
| Animation |
Choose how the banner enters the page. There are seven animation options available:
- 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 administrators to style the content within the banner. Options include:
- Eyebrow Colour: Set the text colour for the optional eyebrow header using a pre-configured list of brand colours.
- Title Colour: Choose the colour of the title text, again from the list of brand colours.
- Title Style: Select the heading size for the title, with options ranging from Heading 1 to Small Paragraph.
- Lead Colour: Set the colour for the optional lead text, using the brand colours palette.
- Text Colour: Choose the colour for the main content text from the list of brand colours.
- Button Colour: Set the colour for the optional button, with values from the brand colours.
- Button Style: Choose from several button styles, such as Solid, Outline, Outline with Slide Animation, Underline, and Underline Pulse Animation.
|
| Content |
This section allows administrators to define the fields for the banner’s content. The available fields are:
- Icon: Upload an image to be displayed above the title/eyebrow header. The icon’s width will automatically be scaled to half of the original upload, ensuring sharp display on retina screens.
- Eyebrow Header: Set the optional eyebrow header content, which is automatically styled as a Heading 6.
- Title: Define the banner’s title text.
- Lead Text: Add optional lead text, with support for rich formatting such as bold, italics, inline links, bullet points, numbered lists, and text colour changes.
- Content: Enter the main content for the banner, with the same rich formatting options as the lead text.
- CTA: Add an optional button below the title and content. You can configure the button’s label, link, and whether it opens in a new tab or the same tab.
|
You can view examples of Heading and Content Banners with different styles and animations here.
