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
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.
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
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.
