Use the Cards component as an entry point to more detailed information. The component can include various sets of elements to serve users' specific needs.
Do's
- display only the most relevant information on each card: card with a thumbnail, title, description
- keep to a minimum the number of links on a card, they act as teasers so just one in direct relation to a page is most often expected
- limit the amount of cards to small groups of items
- limit to 3-4 cards within a row
Don'ts
- don't overuse cards
- don't display too many links on a card, the main and ideally only action on card should remain to navigate to the content it represents.
When to use
- use to help visitors scan content/browse for information (as opposed to searching)
- to group heterogeneous types of content
When not to use
- avoid using on small screen display - using too many cards can force users to scroll down extensively, creates demands on their short-term memory and possibly cognitive overload, which may result in a negative user experience.