...
A card is an expanded container for details and action options relating to a single item.
Cards only appear in the Details Panel.
...
Usage & Behavior
Cards appear in the Details Panel when an item is selected in the main workspace, to provide extra information.
A card should:
contain information relating to one selected item or topic only.
be easy to scan.
prioritise any actions which can be performed on the item.
...
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 options such as:additional action options. 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.
...
Details panel
Cards should only be displayed as part of the Detail panel Details Panel.
...
2. 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.
...
State | Image | Comment |
|---|---|---|
Empty state card |  |
|
Informative card |  |
|
Selected Read-Only card |  | The selected card can be read-only or editable depending on the user’s permissions. |
Selected Editable card |  | Editable cards contain actions button, whereas read-only card do not. |
Interaction
A card must be Selected before any edits can be made. This includes editable fields, status icons which toggle, and any options in the action bar.
A card can be selected in two different ways:
...
Selecting an item from the workspace will open the Details Panel with the relevant card selected.
2. Details panel
When 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.
...