Content blocks

Usage

Use content blocks where a user needs to be presented with multiple pieces of information or actions to deep dive into content.

Do:

• consider and choose text and visual elements carefully. Test content blocks with the minimal content and only add additional content or graphics where they give needed context to the user
• use when content requires in-line or multiple links
• use headlines and links that set clear expectations about the content being linked to
• outline the main idea with the minimal possible information, don't overload with information where you link the user to more detail

Content block types

Content bocks are styled according to their purpose:

• Text block - Use to present multiple pieces of information or actions to users.
• Icon block - Simple and recognisable icons can be added to help users scan and easily identify information quickly.
• Image block - Images can be added to re-enforce the content and and provide more context to the user.

When to avoid

Content blocks should only display enough information to give a user context.

Do not:

• use to group related content, consider cards
• use when content only has one call to action, consider cards
• use when a large amount of text is needed to give users context

How this component works

User interaction

Content blocks use the text link style to indicate clickable elements.

Keep content concise

Content blocks allow users to scan content in order to find their required information quickly, therefore it is important to make the content concise. Ensure the headlines are brief and explicit, and the link clearly indicate the content they link to.

Content elements

Test your blocks with the minimal content and only add additional content where they give needed context to the user. Content types in content blocks include:

• Headline - Provides snapshot of the content.
• Copy - Provides brief summary of the content.
• Link list - Highlights important or priority content within section for user to deep dive.
• Section link - Links user to view all options within section.

Icons and images

Using icons and images in content blocks allow for different content to stand out on a page and provide additional context. It helps users visualise different pieces of information and quickly distinguish between content to find information easily.

Choose your visual components carefully:

• only use icons or images where the graphic supports and re-enforces the content to the user
• only use pictograms or images when they can clearly show the difference in topics and can be easily identified
• do not use for decorative purposes only

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.