The List with Illustrations component presents a set of related items. Each entry combines a visual element (an image, illustration, or icon) with accompanying text. The component can reinforce help users scan and understand by pairing content with a relevant visual cue.
Unlike plain lists, that rely entirely on text hierarchy to carry meaning, the List with illustrations helps users quickly build mental associations. The component is well suited to contexts where a set of parallel items benefits from visual differentiation.
The component supports one-, two-, three-, and four-column layouts. In single-column mode, an optional zebra striping pattern assists users in tracking across long lists by providing an alternating background.
Do's
- use a title, a description - or both - to accompany each visual element so the item has meaning even without the image
- select appropriate images, illustrations, or icons that are directly relevant to and representative of the content
- maintain visual consistency across all items in the same list: if you use an icon on one item, use an icon for each item (i.e. do not mix icons with illustrations)
- apply zebra striping only in single-column layouts where the list contains at least three items and users are expected to scan sequentially
- use concise, parallel text across all items
- ensure each visual element has appropriate alternative text that conveys meaning to visitors using assistive technologies
Don'ts
- do not use decorative or generic visuals that add no meaning
- do not use images or illustrations that are too detailed or complex to be legible at thumbnail size
- do not rely on the visual element alone to convey the full meaning of an item; text should work independently
- do not apply zebra striping in multi-column layouts
- do not use this component as a primary navigation mechanism; it is an editorial and informational pattern
When to use
- use when presenting a set of parallel concepts, services, or topics where a supporting visual will help users distinguish and recall individual items
- use when supplementing body content with a structured visual list in editorial or landing page contexts, particularly in two-, three-, or four-column arrangements
- use when the list is long enough that zebra striping can help users scan
When not to use
- do not use when items are not structurally parallel; the component's layout implies equivalence between items, and mixing unrelated content types can mislead users
- do not use when the primary purpose of the items is navigation or user action. Instead use the Card or Content item components