Lead:  Rotem Avidan (Unlicensed) - 

...

Description

A card is an expanded container for details and action options relating actions related to a single item. e.g.

Cards only appear in the Details Panel.

Usage & Behavior

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

...

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.showing more than one?

General guidelines

Structure

• There are two types of

...

• cards:

...

• read-only

• editable

General guidelines

Structure

...

• and editable.

• Read-only cards contain:

  • a non-editable text area.

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

• Editable cards contain:editable

  • input fields such as a Drop down

  menu

  • menus, Date

  picker

  • pickers, or Time

  picker

  • pickers.

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

  • an action bar, containing additional

  action options

  • actions using Dialog buttons or Icon buttons. The action bar

  should only appear when a card has been selected.

  • expand viewmay contain:

    • an expand button, to make the card larger. show expanded card

    ending

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

Placement & Positioning

• Details panel

...

Cards are aligned to the center of the detail panel. A group of cards is aligned to the top of the panel.

• Fixed width

Card widths should be fixed to the width of the Details Panel. The height may change in response to the amount of content and the card type.

Image Removed	Image Removed	Cards have fixed width. Their height may vary according to the content they show	Image AddedImage Added

• No internal scroll

The content inside a card should not scroll. To show more information, use an expanded view such as a Popover.

...

If another item is selected on the screen, the currently selected card should be closed without saving any changes.

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.

...