Overview Page – Cards | SAP Fiori for Web Design Guidelines (2024)

Each card comprisestwo components: a header area and a content area.The header and content areas are mandatory. A footer area is only usedfor actions in thequick view card.

The interactive navigation in the header and content areas is represented by a hover effect.

When designing cards, make sure that you defineand formatthe texts on all thecards consistently. For details , check out theUI text guidelines for the overview page.

Title

The title is mandatory andrepresents the card’s “point of view”. In one or two words, it explains why this card exists and why a user might want to use it. It is a natural language reflection of the annotated view. Titles that exceed threelines are truncated with the ellipsis (…).

Subtitle

The subtitle is optional. You can use it to qualify the title, offer an explanation, or show a status. The use of the subtitle can differ, depending on the card type.Subtitlesthat exceed one lineare truncated with the ellipsis (…).

Counter

The counter in the header areaindicates how many items are showing on the card in relation to the total number of relevant items:

Format:[Items on Card] of [Total Items]
Example:5 of 40

The counter isright-aligned and is never truncated(the title wraps instead). The width of the counteris flexible, depending on theamount of data.[Items on Card]can show a maximum three digits, and[Total Items] amaximum of four digits. For larger numbers, a scaling factor is shown. If all the relevant items are visible on the card, no counter is shown. There is also no counter ifthere is an issue loading a card, or no items are found for the filter criteria.

In theresizable card layout, the card counter adaptsto the card size. If the user increases the size of a card with a scaled counter, the counter shows theexactnumber of items (without the scaling factor). The scaling factor appears when values exceed 1000.

Overflow Menu

The overflow menu lets users perform the following actions:

• Refresh: refresh only the data in the card, not the entire page.
• Add Card to My Home: add the card to the Insights area of the My Home page.

Formatting Dates, Times, Amounts, and Currencies

Apply the following formats:

• Dates: The default is therelative date format(for example,Today). However, you can also use themedium date format(such asAug 7, 2015).
• Times: Times are not visibleby default, but if you need to show a time, usetheshort format(for example,11:28 AM).
• Integers/Float/Currencies: Use theshort format(for example,1Kfor 1000).

Refresh Behavior

You can set a specific refresh interval for the card content. All cards are refreshed at once.

Keep the user in mind: theshorter the refresh interval, the more disruptive it is for users.

The navigation and interaction depends on the technical card type:

• Single-object cards
• Object groupcards
• Link list cards
• Stack cards

The view switchenables you to reduce the number of similar cards and avoid repeatinginformation.

Single-Object Cards

Cards that feature content with a single focal point, detail, or entity are called single-object cards. An example isaquick viewcardwith information about a particular product.Analytical cardsare also single-object cards. The header area of this card type always navigates to thisspecificfocal point, detail, or entity. The contentarea can also have interaction areas (for example, a section in a chart, or a telephone number fora contact). However, only quick view cards can haveactions in the footer area.

Object GroupCards

Cards that feature a subset of items groupedby a common criterionare called object groupcards. A typical example would be a list of purchaseorders grouped by delivery date, amount, or supplier.The cards do not have actions, but each row or list item is selectable, thus providing direct navigation to the object detailswithin the parent application. The header area of this card type always navigatesto all items in the list or table. Object groupcards include all types oflist cards,bar chart list cards, andtable cards.

Link List Cards

Link list cards allow you to display a collection of links or images that can reference both internal and external targets.

• Linkscan navigate to a target or open a popover with additional information.
• Clicking animageopens animage carousel.

Stack Cards

A stack card is a special card type for showing a collection of single-object cards. Stack cards have3 componentswith different navigation areas:

• The top-levelstack cardopens the collectionandcontains two clickable areas: the left area navigates to the parent app (with the list of all items), and the right area opens the object stream.
• Theobject streamshows individual cards that represent objects from the parent application. The object stream heading links to theparent application, while individual cards can contain links and actions relating to the respective object. AClosebutton returns the user to the stack card.
• The last card inthe object stream is theplaceholder card. The entire card isnavigable and leadsthe userdirectly to theparent application.

You can use a view switchto offer severaldifferent content areas on one card, which can helpto reduce the number of cards on the overview page. The user chooses the view using aselect control.You can only combine views that have a common denominator. The options offered by the select control merely offer different perspectives. For example, a card“Purchasing Spend” (title in the header area) could offer two views “By Material Group” and “By Supplier” (options in the select control). The view switch is located in the upper part of thecontent area.

You can use the view switch for the following cards:

• Analytical card
• List card
• Bar chart list card
• Table card