The Image Banner component allows you to insert image blocks anywhere on a page. These images can be customised with various widths and alignments. Administrators can also independently adjust the roundedness of each corner for both desktop and mobile views, offering a highly customisable design.
This component provides several configuration options, organised into the following categories:
| Settings |
This section contains general settings applicable 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 and alignment of the banner’s container.
|
| Animation |
Administrators can choose an entrance animation for the component. There are seven available options:
- 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 image pod through various options:
- Desktop and Mobile Roundedness: Set the roundedness for each of the image’s corners independently for both desktop and mobile views.
- Full Width: Choose whether the image container should stretch to the full width of the browser or remain within a fixed grid. To make the image hug both the left and right browser edges, enable this option and set Section Width (in the settings tab) to ‘Widest.’ If another Section Width value is selected, the width will be calculated as a percentage of the browser’s width.
|
| Content |
The content section allows administrators to determine content for individual fields within this component.
Fields include:
- Image: Upload the image to be displayed on desktop resolutions. A 16:9 aspect ratio is recommended but not mandatory.
- Image (Mobile): Upload a different image to be displayed on mobile resolutions. A 4:5 aspect ratio is recommended but not enforced.
|
You can view examples of Image Banners in different styles and animations here.
