Summary Card

Summary Cards display a summary of specific data in the system and can expand to show additional information.

  • Usage
  • Configuration
  • Examples

Summary Cards distill a large set of data about a specific item in the system or related data pulled from the same query into one card.

Summary Cards are also often grouped together in a Summary Card Carousel, which displays multiple cards that all represent similar items.

The Summary Card provides the most space for many different field and value pairs to give users a lot of information about a single item or a set of related items. Unlike the Action Card, users cannot take any actions on the items in the Summary Card, nor can they select the card to get more information, like they can with the Action or Number Cards.

The Summary Card is most useful for summarizing all the important values about an item in the system, often an item that relates to other content on the screen. For example, a Summary Card might represent information about a single item in the system above a bar chart representing the quantity of that item over a given period of time.

Anatomy

  1. Card title

  2. Value label

  3. Show More link

  4. Expansion button

Best practices

  • Keep field labels short. Follow the writing guidelines.
  • Add an expansion to show additional card values and set the expansion button label to "Show".

  • The largest card in a group determines the height of the row the cards are on. When combining multiple cards on the same row of the grid, design for the largest card.

  • 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.
  • Configure Summary Cards as small or medium components, and no smaller than small, on the grid.

Properties

  • Apply Card Background checkbox – Optional. If selected, a card background is applied to the Summary Card, which sets the component apart from the screen background. If not selected, the default screen background displays.
  • Primary Info Data Source field – Required. The query that retrieves the data for the Summary Card, based on the data model.
  • Title field – Required. The title that displays for the Summary Card.
  • Primary Info Values section – Optional. A section of properties used to configure the fields that display on the Summary Card:
    • Field field – Optional. The field that displays on the Summary Card, retrieved from the Primary Info Data Source.
    • Label field – Optional. The label that displays for the field.
    • Field Style field – Optional. Specifies a display style in JavaScript to apply to the content on the card.
  • Card ID field – Required. The identifier for the card, retrieved from the Primary Info Data Source.
  • Show Additional Info checkbox – Optional. If selected, users can expand the card to view additional information.
  • Additional Info Values section – Required. A section of properties used to configure the fields that display in the additional information section:
    • Field field – Optional. The field that displays in the additional information section, retrieved from the Primary Info Data Source.
    • Label field – Optional. The label that displays for the field.
  • Expand Label field – Optional. The label that displays as the button to expand the additional information.
  • 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.

Functions

  • Set Info Values – When invoked in an event, the values display on the card.

With overflow

  • Primary Info Values:
    • Field included.
    • Label included.
  • Show Additional Info selected.
  • Additional Info Values:
    • Field included.
    • Label included.
  • Expand Label not included.

With expansion (open)

  • Primary Info Values:
    • Field included.
    • Label included.
  • Show Additional Info not selected.
  • Expand Label included.

With overflow and expansion

  • Primary Info Values:
    • Field included.
    • Label included.
  • Show Additional Info selected.
  • Additional Info Values:
    • Field included.
    • Label included.
  • Expand Label included.

Without expansion

  • Primary Info Values:
    • Field included.
    • Label included.
  • Show Additional Info not selected.
  • Expand Label not included.