Lead:  Rotem Avidan (Unlicensed) - 

...

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

Cards only appear in the Details Panel.

...

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

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

• 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 hold (without using scroll bars)

...

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.

...

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

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

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

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.

• The elements should be in a hierarchical layout - first context, and then action options. ?

Use cards:

• when there is more information than can be displayed on the workspace.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.To show more information, use an expanded view such as

Don’t use cards

• When there is a lot of information to display. In this case, use a Popover.

Future Version (TBD)

...

• collapsible/

...

• expandable card

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

...