Action Card

Action Cards display limited information about an object in the system (e.g. user, process), including an optional count of how many instances of that object exist. This card also allows users to take an action on the object without going to another screen (e.g. deleting or duplicating an instance of an object).

  • Usage
  • Configuration
  • Examples

Action Cards represent a single item in the system and usually indicate an item that users can take some kind of action on. Actions Cards are commonly used to display information that is relatively high-level, but that is still actionable (e.g. ratings for a film that the user can select to receive more information and read a full review).

Compared to the other card components, the Action Card:

  • Provides information and actions in addition to a quantity, similar to the Number Card.
  • Is tied to a specific item in the system, unlike the Text Card.
  • Does not provide as much information as the Summary Card.

The Action Card is most useful for giving users quick access to take action on specific items in the system (e.g. removing or cloning them), while providing enough context to know which item they are taking action on.

Try to limit the number of actions at the bottom of the card to 3 before they collapse into the Actions menu, though more can be included if needed.

Anatomy

  1. Title

  2. Subtitle

  3. Go To icon

  4. Body

  5. Count

  6. Actions

Best practices

  • If none of your Action Cards contain actions, use a Text Card or Number Card instead.
  • Configure cards as small or medium components on the grid. Avoid configuring a card in a single column, as this can cause accessibility issues.
  • If the primary action for an Action Card is best taken on another screen, provide a link to that screen.
  • While the screen or section a card is in can add context to that card's content, ensure that cards stand alone and do not rely on other components for understanding or relevance.
  • When combining multiple cards on the same row of the grid, design for the largest card because all cards will match the height of the largest card.

Do

Add a link if the card's action is best completed on
a separate screen.

Don't

Don't provide vague actions or actions that don't make
sense in the context of the card.

Properties

  • Title field – Required. The title that displays for the card.
  • Subtitle field – Optional. The static subtitle text.
  • Description field – Required. The description that displays on the Action Card.
  • Number Data Source field – Optional. The query that retrieves the data for the items on the Action Card, based on the data model.
  • Default Number field – Optional. The number that displays on the Action Card when the screen loads.
  • Number Label field – Optional. The label that displays for the Default Number field.
  • Actions section – Optional. A section of properties used to configure the actions available to the user on the Action Card:
    • Name field – Optional. The hover text that displays for the action icon.
    • Icon field – Optional. The UI icon that displays for the action.
    • API field – Optional. The API called when the user selects the action icon.
  • Link Card checkbox – Optional. If selected, the user can select the Action Card to display another specified screen.
  • Link To field – Conditionally required if the Link Card checkbox is selected. The URL of the screen that displays when the user selects the Action Card.
  • Show Number checkbox – Optional. If selected, the number specified in the Default Number field and the label specified in Number Label display.
  • Show Subtitle checkbox – Optional. If selected, the subtitle displays.
  • Visibility Permission field – Optional. The user's permission to access the component. If a user is not assigned a role that includes this permission, they cannot view or interact with the component.
  • Visibility Permission Not Assigned drop-down – Optional. If the user does not have permission to access the component, specifies whether to hide or disable it:
    • Hide – The component is hidden.
    • Disable – The component is visible but not cannot be interacted with.

With number, actions, and link

  • Subtitle included.
  • Number Data Source included.
  • Default Number included.
  • Number Label included.
  • Actions:
    • Name included.
    • Icon included.
    • API included.
  • Link Card selected.
  • Link To included.
  • Show Number selected.
  • Show Subtitle selected.

With number and actions

  • Subtitle included.
  • Number Data Source included.
  • Default Number included.
  • Number Label included.
  • Actions:
    • Name included.
    • Icon included.
    • API included.
  • Link Card not selected.
  • Link To not included.
  • Show Number selected.
  • Show Subtitle selected.

With link only

  • Subtitle not included.
  • Number Data Source not included.
  • Default Number not included.
  • Number Label not included.
  • Actions not configured.
  • Link Card selected.
  • Link To included.
  • Show Number not selected.
  • Show Subtitle not selected.

With number and link

  • Subtitle included.
  • Number Data Source included.
  • Default Number included.
  • Number Label included.
  • Actions not configured.
  • Link Card selected.
  • Link To included.
  • Show Number selected.
  • Show Subtitle selected.