Cards

 When to use it

• Aggregation pages that display a variety of content types at the same time on the same page

When not to use it

• Avoid using cards instead of table rows for organised information
• If the reader needs to read the content in order, use a list or simple paragraphs with headings
• Cards are also a poor choice when users need to compare between multiple options, since cards often aren’t structured in a predictable way from item to item
• You have many sections with little information in each—use a table
• to link to content lower down on the page, consider in-page navigation

Do

• Display cards together in a grid or vertical list
• Keep to one concept per card: You can use multiple elements such as images, text, links and icons but they should all constitute one thought or action
• Consider and choose text and visual elements carefully: Test your cards with minimal content and only add additional content or graphics where they give needed context to the user
• Keep text short and concise: According to Google’s Material Design guidelines, cards should “display a small amount of information at a glance, usually no more than 2-3 lines of text”

Don’t

• Overload with information as the card links to content that contains more detail
• Use multiple different styles of cards in the same section. This can create conflicting visual messages, and cause visually cluttered page
• Don’t include inline links. A card should be a singular link or provide a limited set of actions