Cards are used to show different types of related content (e.g. text, photos, icons, charts, digital data, buttons, selection controls, etc). The layout and the format should adapt with the content.
Keep it consistent: cards with a similar content on the same page must be consistent in size and types/number of elements (e.g.: product lists, query lists, dashboard lists, etc.).
Sort the information by order of priority using different text styles to rank the elements.
You can assemble any atom to build any card.
Custom cards should not include more than 9 elements on it. If so, use a collapse feature, redirect to another page, a modal or use tooltips and popover or think about using alternatives like a panel or an accordion.
Cards can be used in lists. They can be laid out in a row, a column, or even fit the whole width of the page.
Don’t mix cards with inconsistent content on the same page.
Choose only one primary action, place it at the bottom right of the card. For secondary actions, opt for a secondary button, a ghost button or a link.
Don’t use more than one primary call to action.
Use the gutters provided by the layouts to let the content breath. Place the cards on the page according to the 8px grid system, and the chosen-12-columns layout.
Don’t use cards inside cards inside cards.