Use content blocks where a user needs to be presented with multiple pieces of information or actions to deep dive into content.
- 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.
- 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
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.
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
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.