...
| Table of Contents |
|---|
Description
A card is an a container, appearing in the details panel, containing details and actions related to a selected item in the main workspace
  |
Usage & Behavior
A card may appear when selecting an element in the main workspace, e.g. a row or a cell in a table
When clicked on, some elements may display more than one card, for example, when showing multiple schedule items of a single employee
...
A card can have two modes: read-only and editable
On read-only mode, the card contains a non-editable text area.
On editable mode, the card contains:
a set of input fields (e.g. drop-down menus, date pickers, time pickers, etc.).
an action bar at the bottom-left side of the card (optional). The action bar appears only when a card has been selected.
a Save and a Cancel buttons at the bottom-right side of the card.
A card may also contain:
a status bar at the top right side of the card, containing a set of status icons and/or icon buttonstoggle buttons. Toggle buttons will be grouped and aligned left to the status icons outside the status bar.
an expand button at the bottom-left side of the card, allowing the user to see more information (see below)
...
Clicking a card will:
Select that card, deselecting any other cards
Switch If allowed, switch the card to editable mode
Move the focus to the corresponding element on the workspace
Clicking an icon a toggle button on the status bar will toggle between its states (e.g. locked / unlocked).
On editable mode, updating any input field will enable both the Save and Cancel buttons. In this case:
clicking the Save button will save the data.
clicking the Cancel button will roll back the fields to their previous values.
clicking either Save or Cancel will also disable both buttons.
Clicking the expand button:
in read-only mode: will open a popup window with additional information.
in editable mode: will open a dialog box with additional settings.
Clicking outside the card:
Deselects the card (unless the click was on a relevant element on the main workspace)
In editable mode: rolls back to any changes made before clicking the Save button
...
when users search for a specific item from a list or look for a particular piece of content. In this case, consider using a master-detail design instead
when users need to compare attributes from different objects
Future Version (TBD)
collapsible/expandable card
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
...