...
| Table of Contents |
|---|
Description
The A card is an expanded container of content and actions for an expanded container for details and action options relating to a single item.
...
Usage & Behavior
A card is a supplementary surface of content and actions for one selected topic.The card should 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.
There are two types of card:
read-only
editable
General guidelines
Structure
Since the card has two statuses: The parts which can be displayed in the card body depends on whether the card is read-only or editable, it affects the parts which display.
In readRead-only status, only the ‘Card’s Body’ will display:
...
The ‘Card’s Body' will display the expanded information, by:
Text / Field - Using a text or text-field (follow the card status)
Status icons (optional) - Status icons may be a status or toggle
In editable status, in addition to the ‘Card’s Body’ part, also the ‘Action Bar’ will display:
...
The ‘Action bar’ will display additional actions to the text-field and toggle-icon. Actions that led to expanded view, ending actions (ex: delete), and approving action (ex: cancel/save).
Placement & Positioning
Detail Pane
The card will display as part of the Detail Pane
...
2. Fixed Width Size
The card width is fixed and height may change follow the content and card type.
...
3. No Scroll
The card will not have an inside scroll, for more information, we will display it as expanded view (ex: popup)
...
cards contain:
a non-editable text area.
status icons (optional). Status icons may be static or toggle.
...
Editable cards contain:
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:
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 be displayed as part of the Detail panel.
...
2. Fixed width
Card widths should be fixed. The height may change in response to the amount of content and the card type.
...
3. No internal scroll
The content inside a card should not scroll. To show more information, use an expanded view such as a Popover.
...
Default State
State | Image | Comment |
|---|---|---|
Empty state card |  |
|
Informative card |  |
|
Selected Read-Only card |  | The selected card can be Readread-only or Editable follow the user privilegeeditable depending on the user’s permissions. |
Selected Editable card |  | In Editable status, we will have actions button while in Read-only we will not have themEditable cards contain actions button, whereas read-only card do not. |
Interaction
A card can be selected in a couple of two different ways:
1. Workspace
Select Selecting an item from the workspace will open the a relevant editable card in an editable mode.
2. Detail Pane Open Details panel
Detail Pane can set to be open all the time (pin state), follow that the cards will display all the time in the detail pane. In that case, the selection can be from the card itself.
Validations & Errors
The card doesn't have validation and errors as an item, the context itself does not have any associated validations or errors. However, the item content (text-field) may have.
Having a change in the card and select on other items on the screen, will get out the card without saving any changes made.
Best practices
Using Card's fields and buttons A card’s content and action options should be clear and understandable what they are aiming to.
Keeping elements on hierarchy The elements should be in a hierarchical layout - first context, and then action options.
Use the card whencards:
When when there is more information that cannot than can be displayed on the workspace.
When when it is important to display the expend information side by side to the one selected topic
When there are grouping to group several related pieces of information together for , providing a linked an entry point to for further details on that contenteach item.
Future Version (TBD)
Future plane - having a collapsible/expanded card
...