...

Cards only appear in the Details Panel.

...

Image Added

Usage & Behavior

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

...

• a non-editable text area.

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

...

Image Added

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.

...

Image Added

Placement & Positioning

• Details panel

Cards should only be displayed as part of the Details Panel.

...

Image Added

• 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 Added
Image Added

• No internal scroll

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

...

Image Added

Default State

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

...

Zeplin link	Screen thumbnail	Image Removed <<Short Zeplin link. You Use this >>
<<Screen with 200 width>>https://zpl.io/bPkWpRy	Image Added

Code

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

...