Lead: Rotem Avidan (Unlicensed) -
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
A card is an expanded a container for , containing details and action options relating actions related to a single selected item .
Cards only appear in the Details Panel.
...
in the main workspace (e.g. cards of events related to a calendar).
...
Usage & Behavior
...
A card may appear when selecting an element in the main workspace,
...
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.
There are two types of card:
read-only
editable
e.g. a row or a cell in a table.
When clicked on, some elements on the main workspace may display more than one card (for example, when showing multiple schedule items of a single employee).
General guidelines
Structure
...
A card can have two modes: read-only
...
and editable.
...
On read-only
...
mode, the card contains 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 additional action options using Dialog buttons or Icon buttons. The action bar should only appear
On editable mode, the card contains:
a set of input fields (e.g. Drop-down Menus, Date Pickers, Time Pickers, etc.).
an action bar at the bottom-left side of the card (optional). The action bar appears only when a card has been selected.
expand view, to make a Save and a Cancel buttons at the bottom-right side of the card larger.
ending actions, such as Delete.
approving actions, such as Cancel and Save.
A card may also contain:
a status bar at the top right side of the card, containing a set of status icons and/or toggle buttons. Toggle buttons will be grouped and aligned to the left of the status icons outside the status bar.
an expand button at the bottom-left side of the card, allowing the user to see more information (see below).
A card in read-only mode | A card in editable mode |
|---|---|
 |  |
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.
...
Default State
...
State
...
Regular
...
Selected
...
Comment
...
Empty state card
...
...
Informative card
...
...
Selected Read-Only card
...
Cards are aligned to the top and the center of the details panel.
Cards have a fixed width. Their height may vary according to the content they hold. A card will not contain a scrollbar.
...
States
...
State | Read-Only | Editable | Comment |
|---|---|---|---|
Regular |  |  | |
Selected |  |  | 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:
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’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:
Hover |  |  | |
Focus |  |  | When using the arrow keys to navigate between items |
Interaction
Clicking a card will:
select that card, deselecting any other cards.
if allowed, switch the card to editable mode.
move the focus to the corresponding element on the workspace.
On editable mode, updating any input field will enable both the Save and Cancel buttons. In this case:
clicking the Save button will save the data.
clicking the Cancel button will roll back the fields to their previous values.
clicking either Save or Cancel will also disable both buttons.
Clicking the Expand button:
in read-only mode: will open a Message Popup with additional information.
in editable mode: will open a dialog with additional settings.
Clicking outside the card:
deselects the card (unless the click was on a relevant element on the main workspace).
in editable mode: rolls back to any changes made before clicking the Save button.
Validations & Errors
Cards do not require special validations.
For validations on card’s content, see Field Validation.
Best practices
Use cards:
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)
...
.
Don’t use cards:
when users need to compare attributes from different objects.
General
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.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Code
...