MDS Assistant is an experiment.
Hi, I'm the MDS Assistant and can help you with information from our guidelines and components.

I do not provide code and development guidance. For coding assistance, please check out our experimental MCP server.

Card

A card is a focused way of displaying content and actions on a specific topic.

Best practice

  • Keep the card simple so the message is easy to understand
  • Make sure that the text inside the card is concise and easy to read
  • Avoid overloading the card with too many actions and/or links
  • If the whole card is clickable then make sure it is easy to predict what is happening when clicked
  • Cards work well as a teaser for e.g. news articles or blog posts
  • Cards are a good way to display related topics
  • On desktop, cards work well in a column-based layout e.g. 3 or 4 cards in a row
  • Do not stretch a card across the entire page