Lead:  Rotem Avidan (Unlicensed) - 

...

State	Read-Only	Editable	Comment
Regular
Selected			The selected card can be read-only or editable depending on the user’s permissions.

Interaction

A card must be selected before any editing can be made. A card can be selected in two different ways:

...

• Clicking a card will:

  • Select that card, deselecting any other cards

  • Switch the card to editable mode

  • Move the focus to the corresponding element on the workspace.Selecting an item from the workspace. This will open the details panel (if not already open) and selected the corresponding card.

• Clicking an icon button on the status bar will toggle between its states (e.g. locked / unlocked).

• On editable mode, updating any input field will enable both the Save and Cancel buttons. In this case:

  • clicking the Save button will save the data.

  • clicking the Cancel button will roll back the fields to their previous values.

  • clicking either Save or Cancel will also disable both buttons.

• Clicking the expand button:

  • in read-only mode: will open a popup window with additional information.

  • in editable mode: will open a dialog box with additional settings.

• Clicking outside the card:

  • Deselects the card (unless the click was on a relevant element on the main workspace)

  • In editable mode: rolls back to any changes made before clicking the Save button

Validations & Errors

• The card itself does not have require any associated validations or errors. However, the item content (text field) may have.If another item is selected on the screen, the currently selected card should be closed without saving any changes. closed?.

• For validations inside the card on editable mode, see Field Validation

Best practices

• A card should:

  • contain information relating to one selected item or topic only.

  • be easy to scan.

  • prioritise any actions which can be performed on the item.

• A card’s content and action options should be clear and understandable.

...

• when it is beneficial to display extra information alongside the selected item in the workspace.

• to group several related pieces of information together, providing an entry point for further details on each item.

Don’t use cards

• When there is a lot of information to displaywhen users search for a specific item from a list or look for a particular piece of content. In this case , use a Popover.sconsider using a master-detail design instead

• when users need to compare attributes from different objects

Future Version (TBD)

• collapsible/expandable card

...