Content block

When to use image, icon or text blocks

Do

• Should only be used on full-width pages (like landing pages, not standard pages).

  • Supports 2, 3, or 4 column layout. 

  • Limit of 6 blocks per section.  

• Use when the content requires multiple links.

• Can be used to display a single link, but cards are the preferred option for displaying a single link. 

• Select icons and images that help inform the content and provide additional context.

• Ensure headings and links complement each other to meet the audience need.

Don't

• Don’t use icons or images for decorative purposes only.
• Don't mix different block types in a single section as this may confuse the audience.
• Don't use for very long descriptions.
• Don't overload the block with too much information. This may overwhelm the audience and result in them abandoning the content. 

How to add image, icon or text blocks

1. Click + Create content block and select Content block from the list.
2. Select the Type of block you require – Image, Icon or Text.
3. All block types include:
   1. Heading – maximum 50 characters
   2. Text and links field (WYSIWYG) – maximum 200 characters.
   3. Link field – add a content or managed link to another page. 
      1. By design, the link text displays as Read more.
4. Additional fields are available when you select:
   1. Image block – add media button is available to select an image from the media library.
   2. Icon block – icon field is available to select a pictogram to add your block. 

Refer to the guidelines for each block type for further information about using this component.

Image block

Use image blocks, rather than icon blocks, when an image better describes the content or when a suitable icon can’t be sourced.

How the image block displays

2 column (Halves) section.

Block 1 – image, description, link list, link.

Block 2 – image, description, single link (secondary button).

Icon block

The icon block variant allows you to select a pictogram from a drop down menu to help the audience easily scan and identify information.

How the icon block displays

3 column (Thirds) section.

• Block 1 – pictogram, heading, short description, single content link.
• Block 2 – pictogram, heading, description, link list.
• Block 3 – pictogram, heading, longer description, no links. 

Text block

Use text blocks when no suitable icons or images will provide additional context for the audience. 

How the text block displays

4 column (Quarters) section.

• Block 1 – heading, description, link.
• Block 2 – heading, description, link list.
• Block 3 – heading, description.
• Block 4 – heading, description, link list.