The Text and Image Panel component allows you to place an image next to a block of text, with options for including a heading, body copy, and a call-to-action link. Authors can customize the placement of the image (left or right), adjust the width of the text and image columns, and control the spacing around the component. This component is ideal when you need to visually balance text with an image, such as highlighting an important message or providing context through imagery.
Example
This is a Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Content Options
This is a Heading
This is Text Content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Layout and Styling Options
Place image on the right
Place image on the right: Off
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Place image on the right: On
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Column Widths
Video Width: 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Video Width: 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Video Width: 6 (default)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Video Width: 8
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Video Width: 10
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bottom Margin
Bottom Margin: None
Bottom Margin: X-Small
Bottom Margin: Small
Bottom Margin: Medium
Bottom Margin: Large
Bottom Margin: X-Large
the end
Top Margin
Top Margin: None
Top Margin: X-Small
Top Margin: Small
Top Margin: Medium
Top Margin: Large
Top Margin: X-Large
the end
Usage
Do
- Ensure the image is relevant to the accompanying text and enhances the message.
- Choose high-quality images that are clear and not pixelated.
- Use a heading to quickly convey the main point of the text, if appropriate.
- Keep the text concise and easy to read, especially in mobile views.
- Consider the layout and adjust the image placement (left or right) based on content flow.
- Check that the column widths create a balanced, visually pleasing layout.
- Adjust spacing above and below to fit the surrounding content and avoid overcrowding.
- Use a call-to-action when you want users to take a specific next step.
- Preview the component on multiple screen sizes to ensure responsiveness.
Don't
- Avoid using low-resolution or stretched images that appear blurry or unprofessional.
- Do not overcrowd the text with too much information; keep it concise.
- Don’t place unrelated images next to the text just to fill space.
- Refrain from using text-heavy images that could be difficult to read, especially on smaller screens.
- Avoid setting the image and text columns to extreme widths that make one element dominate the other.
- Don’t use the call-to-action unless there is a clear action you want the user to take.
- Avoid using the component if there is no clear relationship between the text and the image.
Accessibility
- Ensure that you provide suitable alt text for images. Alt text for images enhances web accessibility by offering a textual description for screen readers used by visually impaired users. See the a11yproject website for more information about writing alt text for images.