Versions Compared

Version Old Version 1 New Version 2
Changes made by

Rotem Avidan (Unlicensed)

Rotem Avidan (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
ONGOING

Status
colourGrey
titleWaiting

Cards

The card is a container of expanded content and actions.


 Image RemovedImage Added


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.

When a card is selected, it has an edit status display and a read status display. Card status can be read or edit.




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

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

  

Image Added



Text 

Use clear and familiar components inside the card. Be keep on clear description and informative sentence.

Image Added


Structure 

<missing image>

Image Added


State 

Unselected

Image Added


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.

Image Added


Select - edit

 A user with permission to edit the card will be able to select a card and edit it.

Image Added




Best practices

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

  1. Using components fields clear and understandable what they are aim to.
  2. Highlight action buttons and function in one place.


Design

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


Code

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



Table of Contents
stylesquare
classsticky-toc