Summary Card Carousel

The Summary Card Carousel is a row of Summary Cards that scroll horizontally to display more cards while taking up less space on the screen. All of the cards in the carousel display information from the same query.

  • Usage
  • Configuration
  • Examples

The Summary Card Carousel groups multiple Summary Cards that all represent similar items into a single row on the screen. For example, the carousel could display on a film database dashboard, with each card showing a genre and some attributes within that genre, such as number of films. The carousel leaves room for other information to display above the fold while still providing easy access to all genre categories.

Anatomy

  1. Card title

  2. Value label

  3. Expansion button

  4. Next icon

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.

  • 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 the Summary Card Carousel as an extra large component, and no smaller than medium, on the grid.
  • Limit the number of cards in the Summary Card Carousel to 10 or fewer to avoid overwhelming users.
  • When pairing the Summary Card Carousel with another component, include a title for each component.

Common patterns

With Bar Chart

Bar Charts, like most other cards, can effectively complement the Summary Card Carousel on dashboards by providing a varied view of a process or data set.

Properties

  • Apply Card Background checkbox – Optional. If selected, a card background is applied to the Summary Card Carousel, 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 Carousel, based on the data model.

  • Title field – The title that displays for the card.
  • Primary Info Values section – Required. A section of properties used to configure the fields that display on the summary card in the carousel:
    • 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 summary 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.

Emitted Events

  • On Card Select – The user selects a card.

Functions

  • Set Selected Card – When invoked in an event, the selected card is marked as selected.
  • Clear Selected Card – When invoked in an event, the card selection is cleared.
  • Set Filter – When invoked in an event, the current selected filters are applied.
  • Clear Filter – When invoked in an event, all filters are cleared and reset to their defaults, if applicable.
  • Get Selected Card – When invoked in an event, the data for the selected card is retrieved.

Three-card carousel

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