How to use an Image Card block
An Image Card block is used to closely link an image with a title and text. The image must be decorative, in other words, not convey any information that’s essential to the user (as there is no option for alternative text).
If you want to include an informative image and don’t need a title, use a Media & Text block .
How to use an Image Card block
An Image Card block can display information in an eye-catching way, for example:
Mental health support
Every Mind Matters can help with expert advice and practical tips to help stay on top of your mental wellbeing.
The image you use needs to be the correct size and quality to display correctly. The image will be resized to 479 by 358 pixels (though it may be smaller if used as part of a column). This is a 3:2 ratio, for example:
- 479 by 358 px
- 958 by 716 px
- 1437 by 1074 px
- 1916 by 1432 px
The text you use can be formatted. To meet accessibility rules you must include any links in the text context, at the point in the content where it’s useful.
How to add an Image Card block
To add an Image Card block to your page:
- Click the plus (‘+’) button to add a block to your page.
- Type ‘image card’.
- Click the ‘Image Card’ option.
- Type your heading title in the ‘Header’ box.
- Set if the heading will be H2 or H3 – find out more about how to use a heading block.
- Add your description in the ‘Description’ box.
- If you need to, use the ‘insert/edit link’ button in the Description formatting options to add a link – find out how to write an effective and accessible link.
- If you want the link to open in a new tab, click the ‘cog’ icon and tick the box next to ‘Open link in a new tab’.
- Click ‘2. Image’.
- Click ‘Logo’ to select it (it will highlight blue).
- Click ‘Add Image’ to upload your image to the site.
- If you want to add a coloured highlight to your image, click ‘3. Options’.
- Select the colour of your highlight from the drop-down menu below to ‘Colour theme’.