Card

Cards are surfaces that display content and actions. They should be easy to read. Elements such as, text and images, should be placed on them in a way that has good hierarchy.

Do’s

  • On desktop, card content can expand and scroll within the card
  • When tabbing through the cards the area is focused before moving to the next card
  • The card container is the only required element in the card, all other actions are optional
  • Buttons or anything actionable is placed at the bottom
  • Expand card to reveal information
  • More than two buttons goes in an overflow menu at the bottom

Don’ts

  • mobile, card content can’t scroll but it can expand
  • Don’t overload cards with extraneous information or actions
  • If using dividers don’t have them run the full length of the card
  • Don’t flip card to reveal information
  • Don’t put more than two buttons on the card