Components

List with illustrations

Introduction

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 instead