Adding a Content block on a page

Content blocks are used to display groups of related content and/or links. They are for use on landing pages only.

Avoid mixing block styles

Don't mix different block types, for example, icon followed by image, followed by icon, in a single section as this may confuse the audience. 

Aim for a consistent audience experience with suitable images or icons and description length.

On this page

• When to use image, icon or text blocks
• How to add image, icon or text blocks
• Content block guidelines
• See this live on the CMS Components Guide

---

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

You can add a Content Block on a landing page by selecting Content block from the list of content blocks. If you need to create more than one content block select Content blocks - multiple.

1. Select the Type of block you require: Image, Icon or Text.
2. All block types include:
   • Heading: maximum 50 characters.
   • Text and links field (WYSIWYG): maximum 200 characters.
   • Link field: add a content or managed link to another page.
     • By design, the link text displays as Read more
3. Additional fields are available when you select:
   • Image block: add media button is available to select an image from the media library. Hide image credit checkbox also appears underneath so the image credit does not appear on the page.
   • Icon block: icon field is available to select a pictogram to add your block.

---

Content block guidelines

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

Image guidelines Icon guidelines Text guidelines

Use image blocks, rather than icon blocks, when an image better describes the content or when a suitable icon can’t be sourced. At least one of the optional parts below should be included in this component.

Part	Required	Guidelines
Image	Mandatory	Image should provide additional context. Image should support and re-enforce the content. Don’t use an image for decorative purposes only. If a suitable image can’t be sourced, consider using an icon block or text block.
Heading	Mandatory	Heading has a limit of 50 characters.
Description	Optional	Should be a short descriptive sentence to provide some context. Limit of 200 characters. Try to keep the length of each description similar if using multiple blocks in a row.
Link list	Optional	Limit of 5 links. Links are optional as this component can also be used to display a single link or simply display content.
Link	Optional	Should link to the page that the 'Heading' describes. You can add a content page link or managed link. By design, the link text displays as Read more. For single image blocks, the link should be an outlined (secondary) button. Consider using the Feature block for a single block with image and link. Link is optional as this component can also be used to simply display content.

The icon block variant allows you to select a pictogram from a drop down menu to help the audience easily scan and identify information. At least one of the optional parts should be included in this component.

Part	Required	Guidelines
Icon	Mandatory	Icon should relate to the content. They are selected from a drop down pictogram list. If a suitable icon is not available, consider using an image block or a text block.
Heading	Mandatory	Heading has a limit of 50 characters.
Description	Optional	Should be a short descriptive sentence to provide some context. Limit of 200 characters. Try to keep the length of each description similar if using multiple blocks in a row.
Link list	Optional	Limit of 5 links. Link list is optional as this component can also be used to display a single link or simply display content.
Link	Optional	Should link to the page that the heading describes. You can add a content page link or managed link. By design, the link text displays as Read more. Link is optional as this component can also be used to simply display content.

Use text blocks when no suitable icons or images will provide additional context for the audience. At least one of the optional parts below should be included in this component.

Part	Required	Guidelines
Heading	Mandatory	Heading has a limit of 50 characters.
Description	Optional	Should be a short descriptive sentence to provide some context. Limit of 200 characters. Try to keep the length of each description similar if using multiple  blocks in a row.
Link list	Optional	Limit of 5 links. Links are optional as this component can also be used to simply display content.
Link	Optional	Should link to the page that the 'Heading' describes. You can add a content page link or managed link. By design, the link text displays as Read more. Link is optional as this component can also be used to simply display content.

See this live on nsw.gov.au

Visit Content block to see how this works on a live page.

You can also see live examples of how agencies have applied the component to their content below: 

• Department of Planning, Housing and Infrastructure
• Department of Regional NSW
• NSW Registry of Births, Deaths & Marriages
• Living in NSW
• Working and business

Need any more help?

If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.