The “Text and Image” component is a straightforward way to present a combination of text and visuals. It is ideal for emphasizing key messages, or information alongside a relevant image. This component has limited styling options, ensuring consistency across your content.
Content Options
This is a Pre Heading
This is a Heading
This is some text content
This is a Pre Heading
This component has everything
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Layout and Styling Options
Heading Options
Pre Heading
Center Aligned
Pre Heading
Left Aligned
Image Placement
Pre Heading
Image on the Left
Pre Heading
Image on the Right
Image Size
Image Width: 2/12
Image Width: 4/12
Image Width: 6/12
Image Width: 8/12
Image Width: 10/12
Margin bottom
None
X-Small
Small
Medium
Large
X-Large
the end
Margin top
None
X-Small
Small
Medium
Large
X-Large
the end
Usage
Do
- Pair relevant and high-quality images with your text to enhance understanding.
- Use clear and concise language to convey your message effectively.
- Position the image thoughtfully to complement and not overwhelm the text.
- Include a descriptive caption for the image if it adds value to the content.
- Maintain a balance between text and image size for a harmonious layout.
- Use this component to break up long sections of text and make the page more visually appealing.
Don't
- Do not use low-resolution or blurry images.
- Avoid using overly long paragraphs; keep the text concise.
- Refrain from placing the image in a way that distracts from the text.
- Refrain from using irrelevant or generic images that do not support the text.
- Do not use this component for content that does not benefit from visual support.
Accessibility
- Ensure that you provide suitable alt text for images. Alt text 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.