Lead: Rotem Avidan (Unlicensed) -
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
The card is an expanded container of content and actions for a single item
...
Usage & Behavior
A card is a supplementary surface of content and actions for one selected topic.
...
Card status can be read-only or editable.
General guidelines
Structure
...
Since the card has two statuses: read-only or editable, it affects the parts which display.
In read-only status, only the
...
‘Card’s Body’ will display
...
In editable status, in addition to the (1)Card Body part, also the (2)Action Bar 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
...
(2) Action Bar
...
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 280px 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
...
Empty state card vs. Informative card
...
...
2
...
. Selected Read-Only Card vs. Selected Editable Card
The selected card can be Read-only or Editable follow the user privilege. 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
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>>
...