The Text + Image component allows website administrators to display a side-by-side section with text and an image, each occupying half of the component’s width. This setup is ideal for showcasing content with accompanying visuals in a balanced layout.
This component offers a variety of configuration options, divided into the following categories:
| Settings |
This section includes general settings that are common across all components within 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 component’s width.
|
| Animation |
Administrators can select from seven entrance animation options 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 style both the text and image pods within the component:
- Title Colour: Set the text colour for the component’s title from a pre-configured list of 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. Option values are based on a pre-configured list of brand colours.
- Button Colour: Set the colour for the optional call-to-action (CTA) button. Option values are based on a pre-configured list of brand colours.
- Button Style: Choose the style of the CTA button, including options such as Solid, Outline, Outline with slide animation, Underline, and Underline Pulse Animation.
- Desktop Image on Left: A toggle field to determine whether the image appears on the left or right of the text on desktop resolutions.
- Mobile Image on Top: A toggle field to determine whether the image appears above or below the text on mobile resolutions.
|
| Content |
This section controls the content displayed within the component:
- Title: Enter the title for the component using this text input field.
- Content: Add and format text for the component, with support for rich formatting such as bold, italics, links, bullet points, numbered lists, and text colour changes.
- CTA: Optionally add a button beneath the content. Administrators can configure the button’s link, label, and determine if it should open in the same tab or a new tab.
- Image: Upload an image to be displayed within the component.
|
You can view examples of the Text + Image component in various styles and with different entry animations here.
