Cards are self-contained elements that display content on a single topic. They serve as calls-to-action that highlight and point users to find out more about the topic. Cards should therefore show summarized, rather than full, information on the topic, with action(s) that point users to learn more.
As much as possible, cards should have only one action: to lead the user to a page, modal dialog, etc. that contains full details of the content. In some cases, like member cards in Local Groups, more than one action is shown on the card. Cards with multiple actions have reduced scannability and increased complexity, and should be used sparingly.
Elevation and Shadows
- In its normal state, a card has the
stratolevel of elevation.
- In its hover state, a card rises to the
mesolevel of elevation.
- In its active or pressed state, a card drops to the
topolevel of elevation.
- When pressed, a card also undergoes
- An exception to these elevation states applies to cards with multiple actions.
- Cards should use the default shadow color.