Description

A card is a container, containing details and actions related to a selected item in the main workspace (e.g. cards of events related to a calendar).

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 on the main workspace 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 toggle buttons. Toggle buttons will be grouped and aligned to the left of 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).

A card in read-only mode	A card in editable mode

A card in read-only mode	A card in editable mode

Cards are aligned to the top and the center of the details panel.
Cards have a fixed width. Their height may vary according to the content they hold. A card will not contain a scrollbar.

State	Read-Only	Editable	Comment

State	Read-Only	Editable	Comment
Regular
Selected			The selected card can be read-only or editable depending on the user’s permissions.
Hover
Focus			When using the arrow keys to navigate between items

Clicking a card will:
- select that card, deselecting any other cards.
- if allowed, switch the card to editable mode.
- move the focus to the corresponding element on the workspace.
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 Message Popup with additional information.
- in editable mode: will open a dialog 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.

Use cards:

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.

Don’t use cards:

General

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.

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

Keyboard	Description
Tab	Navigates to the next action.
Shift + Tab	Navigates to the previous action.
Space	Applies the focused action.
Arrows	Up - Navigates to the previous action. Stops at the first item in the list. Down - Navigates to the next action. Stops at the last item in the list. Holding down the key will scroll continuously.
Page Up/Home	Navigates to the first item.
Page Down/End	Navigates to the last item.
a-z, A-Z	Moves focus to the next menu item with a label starting with the typed character(s), if such an item exists. Typing multiple characters in rapid succession moves the focus to the next menu item starting with the string of typed characters. If no item labels match the typed character(s), the focus does not move.

Zeplin link	Screen thumbnail

Zeplin link	Screen thumbnail
https://zpl.io/bPkWpRy