Image and text blocks are a great way to point users onto the next part of their journey. These work particularly well on homepages. On smaller screen sizes the image will disappear and just display the button link when these are used on left side menu templated pages.
As with content cards, they are best placed within columns. At full width, they'd be overbearing and will consume too much of a user's screen (on desktop or larger devices). It's best practice to split them between two or three columns, like this:
Preparation
For each image and text CTA block, you'll need:
- Label*
- Link*
- Image* (1000px wide by 666px high)
- Link destination*
- Title text (useful for screen reader users)
* Required field
Instructions
- In edit mode of your page, place your cursor where you want your CTA block
- Find /SharedResources/Razor/CTA-ImageAndTextBlock in the project explorer
- Drag and drop CTA-ImageAndTextBlock.cshtml into your page
- Input the control settings
- Save settings
- Save and preview your page - how does it look?
Control settings
CTA label
- Each content card needs a title/label
- Be clear and concise
- Ensure your title is relevant to the link destination
CTA link
- Browse for a CMS page you'd like to link to
- Or link to an external URL
CTA title (hover) text
- Provide some title (or hover) text for screen reader users - this give a little more context for those users that may have a visual impairment, for example
Image
- Upload and approve your image before inserting your control
- Ensure your image is relevant and on brand
Image alt text
- What's going on in your image?
- Provide an image description
Examples
Here are some examples of image and text CTA blocks being used: