Lead: Rotem Avidan (Unlicensed) - DONE
Description
A card is an container for details and actions related to a single item. e.g.
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. showing more than one?
General guidelines
Structure
There are two types of cards: read-only and editable.
Read-only cards contain:
a non-editable text area.
status icons (optional). Status icons may be static or toggle. whats a toggle icon?
|
Editable cards contain:
input fields such as a Drop down menus, Date pickers, or Time pickers.
status icons (optional). Status icons may be static or toggle.
an action bar, containing additional actions using Dialog buttons or Icon buttons. The action bar may contain:
an expand button, to make the card larger. show expanded card; can expand button show on read-only cards as well?
termination actions, such as Delete.
approving actions, such as Cancel and Save. Always appear? maybe separate them from the toolbar
The action bar appears only when a card has been selected.
 |
Placement & Positioning
Cards are aligned to the center of the detail panel.
A group of cards is aligned to the top of the panel.
Cards have fixed width. Their height may vary according to the content they show
 |
 |
No internal scroll
The content inside a card should not scroll.
 |
States
State | Regular | Selected | Comment |
|---|---|---|---|
Empty state |  |  |
|
Informative card | |  |
|
Read-Only card | |  | The selected card can be read-only or editable depending on the user’s permissions. |
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:
Workspace
Selecting an item from the workspace will open the Details Panel with the relevant card selected.
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.
Validations & Errors
The card itself does not have any associated validations or errors. However, the item content (text field) may have.
If another item is selected on the screen, the currently selected card should be closed without saving any changes.
Best practices
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.
A card’s content and action options should be clear and understandable.
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.
To show more information, use an expanded view such as a Popover.
Future Version (TBD)
Future plane - having a collapsible/expanded card
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
<<a box containing the code - discuss with Femi>>