DO
Use linked cards to present a set of clear and prominent choices to users
Use card layouts to visually group related content. Unlike box layouts, card layouts don’t have a separate title bar. Cards also allow you to choose a background color to help highlight their contents.
A set of four cards is used in this example dashboard to highlight four performance metrics. The card background colors can help viewers differentiate poor- and strong-performing metrics.
Like section, box, and billboard layouts, cards span the full width of their containers. Use columns to arrange groups of cards; the containing column width will determine the width of each card.
Each card may also be associated with a link to allow user interaction. Consider cards as a richer alternative to form input choices like buttons and radio buttons.
DO
Use linked cards to present a set of clear and prominent choices to users
DON'T
Avoid using interactive components, such as links or buttons, within the contents of the card when the card itself has a link. This may make it difficult for the user to differentiate between clicking on the card or one of the components within the card.