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 31 Next »

Lead:  Rotem Avidan (Unlicensed) - DONE


Description

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

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.

There are two types of card:

  • read-only

  • editable

General guidelines

Structure

The parts which can be displayed in the card body depends on whether the card is read-only or editable.

Read-only cards contain:

  • a non-editable text area.

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

Editable cards contain:

  • editable fields such as a Drop down menu, Date picker, or Time picker.

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

  • an action bar, containing additional action options using Dialog buttons or Icon buttons. The action bar should only appear when a card has been selected.

    • expand view, to make the card larger.

    • ending actions, such as Delete.

    • approving actions, such as Cancel and Save.

Placement & Positioning

  • Details panel

Cards should only be displayed as part of the Details 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.

  • No internal scroll

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

Default State

State

Regular

Selected

Comment

Empty state card 

 

 Informative card 

 

Selected Read-Only card

The selected card can be read-only or editable depending on the user’s permissions.

Selected Editable card

Editable cards contain actions button, whereas read-only card do not.

Interaction

A card must be Selected before any edits can be made. This includes editable fields, status icons which toggle, and any options in the action bar.

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 in the ‘pin state’ (open all of the time), the cards will already be visible and can be directly selected and edited.

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

Future Version (TBD)

Future plane - having a collapsible/expanded card

Accessibility compliance

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

Design

Zeplin link

Screen thumbnail

https://zpl.io/bPkWpRy

Code

<<a box containing the code - discuss with Femi>>


  • No labels