The Text Over Image component allows you to overlay text directly onto images. Each component can feature a pre-heading, a main heading, and additional link text. You have the option to add a URL to the component, which will make the entire image clickable. Authors can customize several aspects of the component, including text alignment, image overlays, and aspect ratios, to best suit their content and design needs. The “Text Over Image” component is ideal for highlighting key messages and guiding users through your site in a visually appealing way.
![[field.image-button-alternative-text]](/sites/g/files/zrelqx196/files/media/images/2022/P8090466-01.jpg "This is a Heading")
![[field.image-button-alternative-text]](/sites/g/files/zrelqx196/files/media/images/2022/P8150602-01.jpg "This is a Heading")
![[field.image-button-alternative-text]](/sites/g/files/zrelqx196/files/media/images/2022/P8150594-01.jpg "This is a Heading")
Usage
Do
- Ensure your images are high quality and relevant to your content.
- Use clear and concise headings that capture the main message.
- Choose text colors that contrast well with the image for better readability.
- Utilize the text alignment options to best suit the layout of your page.
- Keep your additional link text short and to the point.
- Verify that your links lead to the correct destinations.
- When the component is used in a series, use the same image aspect ratios to maintain visual consistency.
Don't
- Avoid overcrowding the image with too much text.
- Don't use images with busy backgrounds that distract from the text.
- Ensure not to use the same image repeatedly across different sections.
- Be cautious of placing important text elements in areas that might be obscured on smaller screens.
- Avoid using images that are too dark or too bright for the text to stand out.
- Keep accessibility standards in mind when designing your component.
Accessibility
- Alt text is not required as the images are used as background images.
- Use your best judgment when choosing styling options to ensure the text is clear and readable for visually impaired users.