Lead:  Rotem Avidan (Unlicensed) - 


Description

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

Cards only appear in the Details Panel.

Usage & Behavior

General guidelines

Structure

Placement & Positioning

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

Validations & Errors

Best practices

A card should:

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:

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