...
editable fields such as a Drop down menu, Date picker, or Time picker.
status icons (optional). Status icons may be static or toggle.
an action bar, containing additional action options using Dialog buttons or Icon buttons. The action bar should only appear when a card has been selected.
expand view, to make the card larger.
ending actions, such as Delete.
approving actions, such as Cancel and Save.
...
Placement & Positioning
Details panel
Cards should only be displayed as part of the Details Panel.
...
...
Fixed width
Card widths should be fixed to the width of the Details Panel. The height may change in response to the amount of content and the card type.
...
...
No internal scroll
The content inside a card should not scroll. To show more information, use an expanded view such as a Popover.
...
A card can be selected in two different ways:1.
Workspace
Selecting an item from the workspace will open the Details Panel with the relevant card selected.2.
Details panel
If the Details Panel is in the ‘pin state’ (open all of the time), the cards will already be visible and can be directly selected and edited.
...
The elements should be in a hierarchical layout - first context, and then action options.
Use cards:
when there is more information than can be displayed on the workspace.
when it is beneficial to display extra information alongside the selected item in the workspace.
to group several related pieces of information together, providing an entry point for further details on each item.
Future Version (TBD)
Future plane - having a collapsible/expanded card
...