A content item is mostly used to provide a quick overview of an element in a text-heavy listing pages, like news or events, supporting users decision-making.
Anatomy
- Mandatory
- Optional
| Elements | Mandatory | Description |
|---|---|---|
| Primary Meta | No | Primary Meta it describes the item content type and it’s written in sentence case but styled to feature in uppercase |
| Date | No | A separator is required between meta and date |
| Title | Yes | The item title can be linked or not |
| Summary | No | Provide users only the essential information needed to decide which item access the details |
| Secondary Meta | No | Secondary metadata is composed of an icon and a label. It can be added to provide additional information about a specific item's content such as the location or the availability of live streaming of an event |
| Image | No | The image requires a 3:2 ratio and can be left or right aligned |
Guidance
- content items should be easy to scan, avoid large titles and large paragraphs
- display images on the right only to enrich the displayed content not being main information for the user, otherwise use images on the left
Do's and don'ts
Do
Use content items consistently through the list.
Don't
Do not mix different content items on the same list as it will affect scannability.
When to use
- use content items when you want to display a list of events, news, agenda or other similar types of data
When not to use
- do not use for navigation purpose; use navigation lists instead