Cards component is used as an entry point to more detailed information. The component can include various sets of elements to serve users' specific needs.
Do's
- use cards to emphasize on contents
- only display the most relevant information on each card illustration: card with a thumbnail, title, description
- keep the amount of links on the cards as low as possible
Don'ts
- overuse cards
- limit the amount of cards to small groups of items
- limit to 3-4 cards within a row
- display too many links on a cards, the main and ideally only action on card should remain to navigate to the content it represent
When to use
browsing for information (as opposed to searching)
grouping heterogeneous types of content
allowing users to scan through content in small portions
- to display structured content
- to make information discoverable
the user goals that the card-based web design best responds to:
- scrolling through
- scanning through
- browsing through
When not to use
- searching for information (as opposed to browsing)
- on small screen display avoid using too many cards as they force users to scroll down and rely on their short-term memory. This creates a cognitive overload, a negative user experience