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.

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

Example for heading in general

<<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

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

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

<<use Click target to describe the interaction>>

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

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

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

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