Skip to end of banner
Go to start of banner

Cards

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 2 Next »

Lead:  Rotem Avidan (Unlicensed) WAITING

Cards

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.

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

  



Text 

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


Structure 

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



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



  • No labels