Lead:  Rotem Avidan (Unlicensed) - 

...

A card is an container for details and actions related to a single item. e.g. replace image

Cards only appear in the Details Panel.

Image RemovedImage Added

Usage & Behavior

• Cards appear in the Details Panel when an item is selected in the main workspace, to provide extra information. showing more than one?

General guidelines

Structure

• There are two types of cards: read-only cards and editable cards.

• Read-only cards contain:

  • a non-editable text area.

  • status icons (optional). Status icons may be static or toggle. whats a toggle icon?

Image RemovedImage Added

• Editable cards contain:

  • input fields such as a Drop down menus, Date pickers, or Time pickers.

  • status icons (optional). Status icons may be static or toggle.

  • an action bar, containing additional actions using Dialog buttons or Icon buttons. The action bar may contain:

    • an expand button, to make the card larger. show expanded card; can expand button show on read-only cards as well?

    • termination actions, such as Delete.

    • approving actions, such as Cancel and Save. Always appear? maybe separate them from the toolbar

    • The action bar appears only when a card has been selected.

...

• Cards are aligned to the center of the detail panel.

• A The group of cards is aligned to the top of the panel.

• Cards have a fixed width. Their height may vary according to the content they showhold (without using scroll bars)

Image Removed

• No internal scroll

The content inside a card should not scroll.

...

States

State	Regular	Selected	Comment
Empty state
Informative card
Read-Only card			The selected card can be read-only or editable depending on the user’s permissions.
Editable card			Editable cards contain actions button, whereas read-only card do not.

Interaction

• A card must be

...

• selected before any

...

• editing can be made.

...

• A card can be selected in two different ways:

...

• Workspace

  • Selecting an item from the workspace will open the Details Panel with the relevant card selected.

• Details panel

• • If the Details Panel is

...

• • pinned (always open

...

• • ), the cards will

...

• • be visible

...

• • , allowing the user to select a card by clicking it

• Only one card can be

...

• selected at any given time

Validations & Errors

• The card itself does not have 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.

Best practices

A card should:

...