UI Elements - SAPUI5 Form / Layout / Container Card

Updated: August 22, 2023
SAPUI5 Version 1.120

Card

sap.ui.integration.widgets.Card

Intro

A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.

Integration cards are similar to the cards on the overview page. However, unlike the overview page cards, integration cards can be used in different host environments.

A card can show details about a single app or page, or contain related information from multiple sources. An app or page can also be represented by several cards, which each focus on a different aspect of the content.

Card examples
Card examples

When to Use

You can offer cards on the SAP Fiori launchpad or embed them in other controls.

Offer a card if:

  • You want to give users easy access to an app or page that is relevant for a business task.
  • You want to show a KPI or a preview of the most important content for the task.
  • You want to let users complete a simple action right away, without navigating to the underlying app.

Card Anatomy

A card comprises a header and a content area, which are separated by a divider line. Both components are inside a card container, which includes the background and the border.

Header

The header shows what the card is about. There are two variants: the default header and the numeric header.

Card structure
Card structure

Default Header

The default header shows the basic information about the card and has the following components:

  1. The title is mandatory and represents the “point of view” of the card. Titles longer than three lines are truncated with an ellipsis (…).
  2. Optional: You can use a subtitle to qualify the title or explain the context. Subtitles that exceed two lines are truncated.
  3. Optional: You can use an avatar to provide a visual hint on the card header (for example, an image, icon, or initials).
  4. If the content area contains multiple items, a counter is added to the header. It shows how many items are visible on the card in relation to the total number of relevant items (for example, “6 of 12”).
Default header
Default header

Numeric Header

Use the numeric header if you need to display numeric information.

  1. Mandatory title
  2. You can add a subtitle with additional qualifying information (optional).
  3. If you specify a currency or unit of measurement, it also appears in the subtitle row. If you provide both a subtitle and a unit of measurement, the display format is: <subtitle text> | <unit of measurement>.
  4. In additional to the general information, you can configure the visualization for a numeric value, such as a KPI.
  5. If required, you can also show up to two additional indicators that relate to the main KPI.
  6. If required, you can display more information about the numeric value directly below it (for example, the period for which a KPI applies).
Numeric header
Numeric header
Guidelines
Ensure that the card title is short, clear and precise.

Provide all the information required to interpret the numeric value (specific description, currency or unit of measurement, relevant period).

  • For currencies and standard units of measurement, use the dedicated unitOfMeasurement property. The unit then appears consistently in the subtitle line. If the value is a simple count (such as the number of open tasks), a precise title/subtitle text is usually sufficient.
  • If the value applies to a period, use the footer area (5) to specify the period.

Content Area

The content area is reserved for showing information from the underlying source(s). Cards can represent different types of content, with several visualization options. This depends on which card type is used.

Guidelines
In the card content area, show the most relevant data for the task at hand.

Card Types

The card type defines how content is presented (for example, as a list or table). The embedded controls govern the layout, navigation, and interaction in the card content area.

The following card types are available:

List Card

The list card can display multiple list items of various types.

Schematic example of a list card
Schematic example of a list card

Analytical Card

The analytical card visualizes analytics data. It can contain a line chart, bar chart, or donut chart.

Schematic example of an analytical card
Schematic example of an analytical card

Table Card

The table card displays multiple items in a table view.

Schematic example of a table card
Schematic example of a table card

Object Card

You can use this card type to display information about an object in groups. Each group can contain as many items as needed.

Schematic example of an object card
Schematic example of an object card

Timeline Card

The timeline card displays time-related content in chronological order.

Schematic example of a timeline card
Schematic example of a timeline card

Calendar Card

The calendar card shows the schedule for a single entity (typically a person) for a selected day.

Schematic example of a calendar card
Schematic example of a calendar card

Component Card

The component card allows you to display a SAPUI5 component as content. This gives you significant flexibility in configuring the content.

Behavior and Interaction

Card Header

The whole header is clickable and is the navigation area for opening the underlying source. Clicking the header opens the app or page that relates to the card.

Card Content

The content area can have several click areas with different purposes. They depend on the control used and the structure of the content.

Guidelines
Always provide meaningful navigation targets. Ensure that the navigation target supports the information flow that starts on the card.
Card interaction
Card interaction

Responsiveness

The responsive behavior for integration cards depends on the container control of the host environment (for example, SAP Fiori launchpad). The size of the card adapts dynamically to the size of the container.

Top Tips

  • Cards introduce users to the content in the underlying source. Make sure that your card focuses on the most relevant content.
  • Use cards if supportive visualizations and meaningful navigations are helpful for users.
  • Don’t use individual branding.
  • Avoid unnecessary white space on the card.

Related Links

Elements and Controls

Implementation