Skip to content
Anchor Theme
Component Guide

Banner - Image + Content

Back to Components Overview

The Image and Content Banners component allows you to create simple image and text pods, which are ideal for use as “further reading” banners within landing pages.

This component offers a range of configuration options, divided 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 Administrators can choose from seven different entrance animations for the component:

  • 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 customise the styling of the content pod (the container for the image and text). Available options include:

  • Pod Background Colour: Set the background colour for the image and text pod, which can be different from the background of the overall component. Options are selected from the brand colours.
  • Eyebrow Colour: Choose the text colour for the optional eyebrow header, with values available from the brand colours.
  • Title Colour: Set the colour of the title text, using pre-configured brand colours.
  • Title Style: Select the heading size for the title, with options ranging from Heading 1 to Small Paragraph.
  • Text Colour: Choose the text colour for the content paragraph, using pre-configured brand colours.
  • Button Colour: Set the colour for the optional button, with values available from the brand colours.
  • Button Style: Choose the button’s style, with options like Solid, Outline, Outline with Slide Animation, Underline, or Underline Pulse Animation.
  • Desktop Image on Left: A toggle option to control whether the image should appear on the left or right of the text on desktop resolutions.
  • Mobile Image on Top: A toggle option to control whether the image should appear above or below the text on mobile resolutions.
Content This section allows administrators to input the content for each field within the component. Available fields include:

  • Image: Upload an image to be displayed within the pod.
  • Eyebrow Header: Add optional content for the eyebrow header, which will be displayed in the Heading 6 style.
  • Title: Set the title text for the pod.
  • Content: Enter the main content for the pod, with support for rich formatting such as bold, italics, inline links, bullet points, numbered lists, and text colour changes.
  • CTA: Add an optional button beneath the title and content. You can configure the button’s label, link, and choose whether it opens in a new tab or the same tab.

 

You can view examples of Image and Content Banners with various styles and animations here.