Cards

Cards are a great way to summarize content and serve as an entry point to richer information. You can group together chunks of related information that contain anything from plain text to interactive charts. Information that has a complex data set may fit nicely into a card.

Do’s

Cards should always start with the most important information at the top left such as a header that explains what you are seeing. If information is lengthy, add a disclose button to reveal more details instead of displaying it all at once. The container itself should always be white and sit on a solid background (typically gray) for contrast. Cards should always be fixed in width but always variable in height depending on the amount of content that is in it. Keep a 15px margin between cards. Information within it can consist of nested tables, graphs, even images. Links within the table should be in blue unless it calls for a button, in which case, please refer to buttons.

Don'ts

Cards should never flip, rotate or be dismissable.

Example

Example of when to use cards in experiences

Example of when to use cards in results by audiences