Lead: Rotem Avidan (Unlicensed)
| Status | ||||||
|---|---|---|---|---|---|---|
|
| Table of Contents | ||||
|---|---|---|---|---|
|
Description
The card is a container of expanded content and actions.
Types
?
Usage
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.
Use clear and familiar components inside the card. Be keep on clear description and informative sentence.
<missing image>
State
Unselected
Select View
A user with no permission to edit the card will be able to select a card and learn on it including expanding the information only.
Select - edit
A user with permission to edit the card will be able to select a card and edit it.
Anatomy
The card elements can be changed following the needs, but the base guidelines are:
- Keeping elements on hierarchy layout
- Action and button will be located on the bottom of the card
- Card's body
The card body can change follow the card mode - read and edit.- Filed / Text
Using text or filed follow the card status. - Status icons (optional)
Status icons may display for more indication. The icons can be toggle or status.
- Filed / Text
- Action bar (optional)
Cards can include buttons for actionsCards can include buttons for actions
Types
By usage
An example of a card with no information of the object selected vs. an object with information
By State
Unselected
When a card is in the unselected mode, the information will display for the user but not action and edit be working
Selected
When a card is in the selected mode, the user will be able to edit the value and have action
Usage
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.
When to use card
Using the card when you have a massive workspace and you need to give more information specific on an item.
Usability guidance
- Using components fields clear and understandable what they are aim to.
- Highlight action buttons and function in one place.
Structure
Best practices
<<e.g. Slider should display a .label its on>>
????
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 Keyboard & Focus Management Guidelines >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>
Contrast & size compliance
<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>
Design
| Zeplin link | Screen thumbnail |
|---|---|
| <<Zeplin Link>> | <<Screen with 200 width>> |
Code
<<a box containing the code - discuss with Femi>>