Lead: Rotem Avidan (Unlicensed) -
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
The A card is an expanded container of content a container, containing details and actions for related to a single item
...
selected item in the main workspace (e.g. cards of events related to a calendar).
...
Usage & Behavior
A card
...
The card should be easy to scan and aiming at what action can be done at him.
...
may appear when selecting an element in the main workspace, 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’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)
...
Default State
State | Image | Comment |
|---|---|---|
Empty state card |  |
|
Informative card |  |
|
Selected Read-Only card |  | The selected card can be Read-only or Editable follow the user privilege. |
Selected Editable card |  | In Editable status, we will have actions button while in Read-only we will not have them. |
Interaction
A card can be selected in a couple of ways:
1. Workspace
Select an item from the workspace will open the relevant card in an editable mode
2. Detail Pane Open
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 (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 clear and understandable what they are aiming to.
Keeping elements on hierarchy layout - first context and then action.
When to use the card
When there is more information that cannot be displayed on the workspace
When there is need of distinction between what is main vs. secondary information
When using Card and not Popup
When it is important to display the expend information side by side to the one selected topic
When the expend information is not massive and can be displayed in a card
Future Version (TBD)
Future plane - having a collapsible/expanded card
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
Contrast & size compliance
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>
Design
...
Zeplin link
...
Screen thumbnail
...
<<Short Zeplin link. You
Use this
>>
...
<<Screen with 200 width>>
Code
...
the card contains a non-editable text area.
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.
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 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
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. |
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.
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
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
...