Lead: Rotem Avidan (Unlicensed) - DONE
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.
The card should be easy to scan and aiming at what action can be done at him.
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:
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 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
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 | <<Screen with 200 width>> |
Code
<<a box containing the code - discuss with Femi>>