A card is a flexible container that groups related blocks of content and information into a single unit.
Cards display a snapshot of information intended to encourage users to interact with or click to view more details or actions. According to the Nielsen Norman group, cards have four key properties:
Editable cards group information that represents an object, object groupings, or a specific aspect of an object that the user can manage. Their primary purpose is for viewing and modifying content that is contained entirely in the card.
Content cards are intended for grouping and organizing related static content. Their primary purpose is for displaying a summary of information and do not contain an editable state.
A card is composed of two distinct zones: the title and the body.
The title of your card should mirror the content or summary in your card. You can also include an optional label, pictogram, or image above your header text. Use sentence case for titles.
Depending on the type and size of card you use, aim to use minimal body content in your card. Remember, cards present a summary or snapshot of information. You can place other components inside the body of card such as structured lists, data visualizations, images, links, videos, buttons, etc. These components will occupy the full width of the card.
Card titles can wrap up to 2 lines
Scrolling is not allowed in the body of a card.
Editable cards allow a user to view, modify, and save the content contained within the card. Use editable cards when a user needs to make changes to resources like configuration details or an account plan.
|Types of editable cards|
|List views||A structured list is used to show the details, attributes, or metadata of an object. A user can individually edit one line in the list or multiple.|
|Summary||Summary cards provide a brief overview of the state of an object (e.g. health status, speed, creation date, etc.) and can use multiple components.|
Alert the user of any unsaved changes if they try to navigate to a different page while in the edit state.
Content cards group related information in a single location on the page. Content cards often include paragraphs and images or videos and accompanying text. These cards can be used in a variety of ways.
1. Marketing, promotions, or introductions. These are small cards used to show a product summary or functionality for the user to learn about and try. It can be used to promote other supplementary such as docs and FAQs.
2. Expandable on-boarding, learning material, or additional information. Use cards to give a user a glimpse into a feature, or use them to preview a learning resource like best practices or other types of educational content.
3. Guide a user’s first steps
Content cards can invite the user to start a specific process such as getting started with a new offering, launching a starter kit, or deploying a resource.
4. Group blocks of related content
Cards can be used to block groups of related content even if it doesn’t fit into the above models.