Lead: Rotem Avidan (Unlicensed) - ONGOING
| Table of Contents | ||||
|---|---|---|---|---|
|
...
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 or edit.
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 (read or readable or edit)
B. Status icons (optional)
Status icons display more indication and may be status or toggle
...
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
...
2. The card context can have validation and errors - see Text Filed Field Validation
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.
...
Zeplin link | Screen thumbnail |
|---|---|
<<Zeplin Link>> | |
Code
<<a box containing the code - discuss with Femi>>
...