Cards are containers that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.

Contained - A card is identifiable as a single, contained unit.

Independent - A card can stand alone, without relying on surrounding elements for context.

Individual - A card cannot merge with another card, or divide into multiple cards.

Summarized - A card by nature has limited real estate, so it should present summarized information.

Cards should be used when:

• Presenting high-level, summarized pieces of information.
• Presenting an item, or collection of items, which can best be consumed visually.

In all cases the presentation allows users to quickly scan the content and navigate to underlying detail if desired.

A card is a rich, flexible UI component; its anatomy, visual/interactive treatments, and relationship to its peers help to establish and reinforce its purpose. The following are distinct types of cards that have unique purposes and best practices.

Use left-alignment whenever possible in order to optimize readability.

For cards within the same layout section, place a minimum gap of "medium" between cards.

• If a card does not contain an action behavior, do not provide hover feedback.
• If a card has a singular action behavior, the entire card can be clickable. Provide a hand cursor change and large elevation on hover.
• If a card contains a multiple action behaviors, such as a primary action and a secondary action, provide the documented hover feedback on the individual actionable elements only.

Card titles should use a Heading of the correct semantic heading level based on where the card is in the document. For example, a card nested under a Heading level 2 should use a Heading level 3 for its title.

Don't use Text for the card title as this will hurt the experience for users of assisstive technologies.

When cards are presenting as a group, they should function as a list.

• Apply as="ul" or as="ol" (depending on if the list is orderded or not) to the cards' layout container (whether that be a Grid, List, or other layout component).
  • Some default browser padding may need to be overridden. This can be done by applying pad="none", or the desired padding, to the container.
• Apply as="li" to the individual cards.

• When data attributes across items needs to be analyzed, sorted, compared, and filtered, a card may not be the best tool. Instead, DataTable may be more appropriate tool to meet these needs.
• Cards should not be used as a control to filter data on the same screen. A button is the appropriate control to apply a filter. Alternatively, cards may be used to present summarized information and allow a user to navigate to a pre-filtered view of that information.

• A card should not be used to group complex content into a single container. A card is meant to be individual, presenting a single, summarized topic which cannot be divided.