The list with illustrations component is used for illustrative purposes only, allowing a multi-column layout display of content with an image, illustration or icon.
The one-column layout also offers an optional zebra pattern, allowing users to easily scan through long lists.
Do's
- either use title or description to accompany the image, illustration or icon
- select an appropriate image, illustration or icon, that is suggestive, complementary and relevant for the related content
- activate the zebra pattern where users can benefit from the added background color, generally on larger lists (at least 3 items)
Don'ts
- do not choose unrepresentative icons
- do not choose images or illustrations that are too complex to be distinguished in the media thumbnail
When to use
- in lists, when you want to visually supplement a paragraph in a one, two, three or four column layout
- in cases where users' reading experience can be enhanced by the zebra pattern (only 1 column layout)
When not to use
- do not use when the primary scope is navigation - use Content item or Cards component instead