Resources
Intro & Anatomy
List Cards are vertically arranged, continuous collections of content that combine text, images, and other interactive elements. They are designed to help users quickly scan, locate, and interact with specific items within a dataset or collection. List Cards are versatile and can be used in a variety of contexts, such as product catalogs, search results, or task lists.
Usage
Use first and last items. Choose separation type: spacing, divider or none.
Specifications
Item configuration
Keep items short and easy to scan. Use elements within your items carefully. Left and right assets facilitate scanning, but using both may result in a cluttered list. Choose from following elements:
- Asset left
- Asset right
- Switch right
- Value right
- Headline
- Supporting text
- Semantic text
Left asset size
Left assets can have 3 different sizes:
- Small (icon)
- Medium (avatar)
- Large (illustration)
Semantic items
Items can have 3 semantic properties reflected by different color codings of specific elements. (semantic text, right value, right asset)
- Neutral
- Success
- Error
Padding
List items can have no horizontal padding. This ensures horizontal alignment in case the list is nested in a container that already has horizontal padding.
Grouping
Multiple list items get grouped into a list. There are 3 different separation types. A single list item is shown as standalone.
Spacing
Divider
None
Standalone
States
Hover