Lead: Rotem Avidan (Unlicensed) -
| Status | ||||
|---|---|---|---|---|
|
...
Description
A card is an container for , appearing in the details panel, containing details and actions related to a single item. replace image
Cards only appear in the Details Panel.
...
selected item in the main workspace
...
Usage & Behavior
Cards appear in the Details Panel when an item is selected A card may appear when selecting an element in the main workspace, to provide extra information. showing more than one?e.g. a row or a cell in table
When clicked on, some elements may display more than one card, for example, when showing multiple schedule items of a single employee
General guidelines
Structure
There are two types of cardsA card can have two modes: read - only cards and editable cards.Read
On read-only cards contain: mode the card contains 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 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.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.
a Save and a Cancel buttons at the bottom-right side of the card.
A card may also contain:
a status bar at the top right side of the card, containing a set of icons and/or icon buttons.
an expand button at the bottom-left side of the card, allowing the user to see more information (see below)
an action bar, containing additional actions using Dialog buttons or Icon buttons. The action bar may contain:
On editable mode, the card contains:
A card in read-only mode | A card in editable mode |
|---|---|
 |  |
Placement & Positioning
Cards are aligned to the top and the center of the detail details panel.
The group of cards is aligned to the top of the panel.
Cards have a fixed width. Their height may vary according to the content they hold (without using scroll barsa card will not contain a scroll bar)
  |
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. |
...
A card must be selected before any editing can be made. A card can be selected in two different ways:
Selecting an item from the workspace will open the Details Panel with the relevant corresponding card selected.
If the Details Panel is pinned (always open), the cards will be visible, allowing the user to select a card by clicking it
Only one card can be selected at any given timeSelecting a card moves the focus to the corresponding element on the workspace
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. closed?
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 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.
...
When there is a lot of information to display. In this case, use a Popover.s
Future Version (TBD)
collapsible/expandable card
...