Collab space: Content blocks

This is an open space for collaborating on a content block pattern. To join in the conversation please add a comment below.

Content blocks


The current card pattern groups related content or tasks to make it easier for users to scan, read, and find information. However they do not allow for inline links or to group multiple links together. Therefore we have looked at a content block design to give users additional context and access deeper information quickly.


Content blocks allow users to select from multiple actions related to a topic or task.

When to use Content blocks

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


  • 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 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

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

Interaction Design & Usability Research

  • Surfacing content helps users access their required information quickly and gives users greater context of content areas
  • Content blocks use the text link style to indicate clickable elements.

UI Design

Proposed solution of:


Icon option:

Image option:

Showing different content types:


These awesome collaborators have contributed insights, knowledge, and time to the information above:
Web Consolidation Team