Cards
Cards are visual elements that contain varying amounts of graphical and textual content as well as optionally providing actions other than just linking to other pages and resources.
Cards may contain thumbnail images but do not require them. However, each card should have only one thumbnail.
If your content does not have a large amount of text and do not provide actions beyond linkage, you may alternatively use Tiles.
Standard Card

This is an example of a “standard” card, which contains a title, sub-title, description, one or more actions, and a thumbnail. Use this card for rich search results displayed in a grid.

Card Title
card sub-title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.text–primary
.text–secondary

.text–supporting



Light Card

This is a “light” card, which differs from the standard card by omitting a sub-title and actions aligned in a footer at the bottom of the card. Note the main action, opening the item, is used by making the card’s title a link. This card is recommended for search results that are not action-heavy (e.g., no delete, selection, editing, etc) and which do not have distinctive categorization.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

a.text–primary

.text–supporting

Text-Only Card

This is an example of a “standard” card that does not have a thumbnail. Use this card when display results in a grid where none of the results have a visual representation. If only one some of the items lack an image, use the “standard” card above with a fallback image in place of an item’s missing thumbnail.

Card Title
card sub-title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.text–primary
.text–secondary

.text–supporting

Minimal Card

This is an example of a “minimal” card which only displays a thumbnail and the title. Use this card for simple item display, like that in a sidebar.