Cards
A Card is a component that can be used to group related information in a container.
The design resembles that of physical cards, and thus will render content easily scannable because of its familiar concept.
Card as content block.
Cards can be used as a simple content block.
In this case it is important that no hover-effects are applied to the card, which could lead to it being misinterpreted as an interactive component.
A card title
And some content without interaction
Card with interactive elements.
Cards can also contain interactive elements, such as buttons, tooltips, links
Although interaction is possible, again no hover-effects should be applied to the card itself.
A card title
And some content and some interactive elements, in this case buttons
Card as interactive block
An entire card can also be made clickable and thus behave as an interactive block.
In this case, a hover effect is applied to the card itself and it should not contain any other interactive elements.
Alternative Card
if you want a card to stand out from other cards, this alternative design can be used.
This design should only be used as an addition to the default cards. In other words: default cards should already be available on a page before adding this alternative card
These can also be used with our without interactive elements
Alternative card
And some content