The Content item component provides a quick overview of the content, to help users evaluate linked pages before committing to navigation. The displayed elements are organised in an easily recognisable structure, intended to support scannability and decision-making through consistent interactions (e.g. linking to related pages).
This is one of the most flexible components. It aims to reduce cognitive effort in browsing tasks, by presenting essential information consistently through various design elements. It can include labels, primary metadata, image thumbnails, paragraphs, secondary metadata accompanied by icons and lastly, description lists. It can be used in lists, either vertically or as part of a grid.
Do's
- maintain consistent element ordering across all instances within the same list - to support pattern recognition and easy scanning within a list
- if using images, opt for assets that are related to the content and easy for users to understand
- if using illustrations or icons, opt for assets that represent the associated content
- if using with an Event (dedicated content item variant making use of the Date block component) split over multiple days, make sure to include the date range
Don'ts
-
do not align images, illustrations or icons inconsistently within the same collection
- mixing left-aligned, right-aligned, or no-image content creates visual noise that might hinder scannability
-
do not use content items for actionable tasks requiring immediate interaction beyond navigation
-
do not present critical information solely through images, illustrations or icons without text alternatives (i.e. status display)
When to use
- use when you need a teaser that links to page of interest
- use as part of a list
When not to use
- do not use when navigation structure or hierarchy (i.e. not content preview) is the primary need, use Navigation list instead
- do not use when asingle, high-priority content item requires emphasis or a differentiated presentation, use Featured item or Banner components instead