Lead:  Rotem Avidan (Unlicensed) ONGOING


Cards

The card is a container of expanded content and actions.


 


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.

When a card is selected, it has an edit status display and a read status display. 


Anatomy

The card elements can be changed following the needs, but the base guidelines are:

  1. Keeping elements on hierarchy layout
  2. Action and button will be located on the bottom of the card

  




Types 



<<use heading 3>>

  • Text (Headings, labels, microcopty, help text Etc..) ( how to write microcopy for that component. For example, in lists the list items must be grammatically parallel and don’t mix active and passive voice etc)
  • Format / structure (describe the objects the component is made of and are optional e.g. search bar in a table) (for search component include - variations, results)(for tabs - Number of tabs)
  • Content (for example, in dropdowns and lists)
  • Length (e.g. length of list)
  • Order (e.g. order of drop down menu)
  • Placement or Positioning (when this is important, e.g. toast message)
  • Internal Logic (when explaining how to use different components inside the current component. For example, when to use radio buttons, checkboxes, and fields in a form)
  • Default section or Default values 

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

Interaction

<<for example, how to change a value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Validations and errors

<<used for specific components e.g. slider>>

Best practices

<<e.g. Slider should display a .label its on>>

Design

Zeplin linkScreen thumbnail
<<Zeplin Link>><<Screen with 200 width>>


Code

<<a box containing the code - discuss with Femi>>