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

Open

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

General guidelines

Structure

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

Placement & Positioning

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

States

Interaction

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

Validations & Errors

• Cards do not require special validations.

• For validations on card’s content, see Field Validation.

Best practices

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:

• when users need to compare attributes from different objects.

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.

Accessibility compliance

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

Design

Code