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.


  • 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


  • 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

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, creating cognitive overload, which may result in a negative user experience.