When to use
Cards are containers for content (with optional actions) about a single subject. They provide a preview if what to expect when the user taps or clicks it (or the, optional, individual actions presented on the card). They should be easy to scan for relevant and actionable information.
There are several presets/ card type defined (see the Overview page). The kind of card depends in the context. The most generic and flexible type is the content card.
Behaviour
As stated, a Card is an actionable container and provides a brief insight of what to expect by performing the (primary) card action.
The primary action area of a card is typically the card itself - with a single click or tap the user and navigates to a detail screen on one specific subject.
However, a (content) Card could also have supplemental (or secondary and tertiary) actions, typically placed at the bottom of the card. In that case these specific UI area’s form another action zone.
Layout and positioning
Cards are flexible containers. The card width is adjustable so it can follow a specific kind of layout (amount of columns/ horizontally stacked cards).
Depending on the device type and context the Card layout can be adjusted accordingly. On the smallest devices, Cards are usually fullwidth and vertically stacked. On larger screens they may adjust to 2, 3 or 4 columns based on the layout type that suits the context (and content) the best possible way.
Accessibility considerations
To be added.