“Card” Component

Design: zeplin.

Overview

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 strato level of elevation.
• In its hover state, a card rises to the meso level of elevation.
• In its active or pressed state, a card drops to the topo level of elevation.
• When pressed, a card also undergoes translateY(2px).
• An exception to these elevation states applies to cards with multiple actions.
• Cards should use the default shadow color.