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 a 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 editeditable.
General guidelines
Structure
...
The card elements are:
1. The Card Body
The Card body has two state mode - read and edit.
This part will include the expanded information of the selected single subject which will display by:
A. Filed / Text
Using text or filed follow the card state mode (readable or edit)
...
Since the card has two statuses: read-only or editable, it affects the parts which display.
In read-only status, only the (1)Card Body will display.
In editable status, in addition to the (1)Card Body part, also the (2)Action Bar will display.
(1) Card Body
Here we will display the expanded information, by:
Text / Field
Using a text or text-field (follow the card status)
Status icons (optional)
Status icons display more indication and may be a status or toggle
(2. Action bar (optional)
The action bar includes more optional actions that affected on the single subject
...
Positioning and Size
1. ) Action Bar
Here we 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
(1) Detail Pane
The card will display as part of the Detail Pane
...
(2. ) Fixed Width Size
The card width is 280px fixed - 280px and height may change follow the content content and card type
...
(3. ) No Scroll
The card will not have an inside scroll
4. The card can not be drag and move
States
...
Card with not information vs. Card with information
...
Mode
View state mode - is when the card is unselected, the information will display but with out the action
...
Edit state mode - is when the card is selected, the information and action will display
...
Validations and Errors
...
, for more information, we will display it as expanded view (ex: popup)
...
Default State
(1) 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
(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 item2. The card context can have validation and errors - see Field Validation, the context (text-field) may have.
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 card
1. If you have a massive workspace and you need to give more information specific for an item
2. If you want to focus between main and secondary information for an item
When to consider using Card or Popup
1. Using Card when the expand information is not massive, if it is not - use the Popup
...
(1) When there is more information that cannot be displayed on the workspace
(2) When there is need of distinction between what is main vs. secondary information
When using Card and not Popup
(1) When it is important to display the expend information side by side to the one selected topic
(2) 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>>
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 | <<Zeplin Link>>|
|---|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> | |
Code
<<a box containing the code - discuss with Femi>>
...