Last Updated on Sep 29, 2022
Cards are containers for content. They're often used to show a collection of related but different types of information.

Component Variants

Card Title

Design Principles

  • Cards are used to more aesthetically present data compared to flat table row. They can also provide an entry point to more detailed information.
  • Depending on the design of the screen, you can wrap a table in a card. This is often used to combine a filter bar and a table to clearly show they are related. Wrapping tables in cards is optional. It’s up to the designer’s discretion. When tables are wrapped in cards, they should always be bordered.
  • In some cases, cards can have a hover and selected state to allow users to select data. This is not the default usage of a card.

Do's and Don'ts

Use a Card when you have different kinds of related content representing one data object.
Place icons, context switchers, and other UI in the top right of cards. Don’t use more than three icons in the card header. If more than thre are needed, use a menu icon to open less used options.
Don’t group sets of unrelated information in a card.
Don’t wrap a table in a card unless there is a filter bar or other necessary UI inside the card.
Related Components