Overview

Cards are small previews of app content, with each card representing a specific topic, task, or perspective. As containers, they offer a variety of content, from charts, to lists, to descriptive unit information. The cards listed in this page follow and expands Fiori's standards for cards. For example:

Usage

Cards display varying types of content from different sources in one page, allow users to preview application content, monitor key topics, and quick start relevant tasks. Cards are frequently used on the homepage of our applications. Cards can have flexible layouts, and users can resize and move them on a Dynamic Canvas as needed.

In Database, Data Management & Analytics tools, Cards have additional variations and specifications for some discussed standard Fiori card types, and they are covered in this article and should be used as the primary guideline for our applications.

cards_SAC.png

Cards on SAC's Homepage

tiles_SAC.png

Tiles on SAC's Content Network

guideline
Cards vs. TilesCards are used for representing a conceptual unit that may contain varying types of information a­nd multiple interactive elements. Tiles provide at-a-glance information and mainly offer an entry point to an app or destination, tiles don't have multiple interactive elements or areas.

Anatomy

The most basic structure of a Card, defined by Fiori, comprises a mandatory header and content area. The optional footer area can be used as needed in Database, Data Management & Analytics applications and not restricted to a particular card type described in Fiori.

Content Area

Use the content area for charts, lists, table, calendar events, images, links, buttons, and text, or a combination of these elements.

The entire footer area is optional, but use the the footer when any or all of the items below are needed:

Card Types

This section showcases the common card types and the range of varieties, and it is still a WIP and should not be read as exhaustive. Three standard Fiori Card types with that often used in our applications:

1. Analytical Card

The Analytical Card is a standard Fiori card type that used for data visualization and often shown on the Homepage of our applications. It consists of a header area and a chart area, and the visual representation of the data can be static or interactive. In SAC, depending on the type of visualizations, the header actions might be different. The Analytical Card is a single object card and does not contain a footer area. This type of card can be resizable or fixed in size.

2
analytics dos.png
do
false

Use Title and Subtitle (optional).

User overflow for additional header actions.

analytics donts.png
dont
false

Don't use Avatar/Icon for Analytical Cards.

Don't surface more than 3 actions in the header area.

information
Special Example - Fiori for AnalyticsThe Analytical Cards defined by Fiori for Analytics Guidelines can contain multiple communication and navigation elements, which often used for embedded scenarios and do not have header actions. The card has a more comprehensive structure with a KPI Value Area, Additional Text (optional), and Chart Area. Analytical cards from Fiori for Analytics use IBCS semantic patterns.

2. Quick View Card

Quick View Cards are Single Object Cards, and they display the basic details for one object or subject. The use of this type cards is not restricted to the Fiori guideline, the cards can be used on the homepage and other areas in our applications, for profile information, data attribute, and account information etc. It contains a header, content, and footer area. Quick view cards are often fixed in size and designed in a horizontal layout.

2
quickview dos.png
do
false

Use the avatar to help differentiate the type of object/app/content.

Place metadata/status information to the left side of the footer and action buttons to the right.

quickview donts.png
dont
false

Don’t misplace the action buttons and metadata in the footer.

Don’t use both header and footer actions for quick view cards.

information
Special Example - Catalog CardThe Catalog Card is a special example of Quick View Card. It contains a header, content, and footer area. Each card is an entry point for the underlying content. A Catalog Card is fixed in size and may contain a full-bleed (except the right edge) cover image. Catalog cards are used under the Catalog tab of SAC’s Homepage and DWC’s Business Catalog.

3. List Card

The List Card is also one of the standard Fiori card types that display a set of items or link in a list format. It contains a header, content area, and an optional footer area is optional. The list of items can be dynamic and interactive. You can use an icon, image, link, and buttons in an item. The list card is often resizable.

2
list dos.png
do
false

Reserve enough content space for scrolling and reveal at least 5 list items.

For the link list, use the entire list item as a clickable element with proper interaction states.

list donts.png
dont
false

Don’t set fixed/default dimensions that has limited content space for List Cards.

The item name and attribute (optional) should not exceed 2 lines.

Don’t use link text as the indicator instead of a hover state.

information
Special Example - Activity CardThe Activity Card is a Database, Data Management & Analytics-specific and a very special example of List Card, and the list items are dynamic notifications and information-dense. It contains a header, content, and footer area. In our applications, it is fixed in width and located in the centre of the homepage. The height of the card is dynamic as users can scroll and load more notification feeds if applicable.Regarding the notification content, please read Notifications for more details.

information
Special Example – Calendar Highlights CardThe Calendar Highlights Card is also a special example of List Card. It contains a header and content area. Its list items have two levels. The top-level items are Trees, the secondary level list items are embedded in tokens with icons and titles. The list of Trees represent the event/task categories and can be expanded, the individual token is a link to the target event/task, and a load more button may be available when there are more items. The list content is highly customized and shouldn’t be used as a standard List Card for different purposes.

Behavior and Interactions

There are various interactions for different types of cards and layouts. Here are the common interactions a card can have, please note these may not apply to all cards.

Some cards may have links that help the user to navigate to corresponding files and content. In our applications, links are often represented by the list items in the list cards. If the list item comprises icon, title, and subtitle, show no more than 6 by default and hide the rest. To see more items/links the user can scroll the list or resize the card if applicable.

A card itself may be clickable and can direct the user to corresponding content or space. In our applications, SAC's Catalog Cards and DWC's Space Cards are examples of such behaviour and interactions.

Delete

Cards can have a Delete Button when the user hovers over the header area. The Delete button will allow users to delete any cards that no longer needed in a customizable and more personalized space, such as the Homepage. System cards and published cards created by others will not have the Delete option.

Resizing

The cards are positioned on an underlying grid, making it possible to arrange and resize cards in a flexible, yet guided manner. Cards can be resized by interacting with the handle icon on the bottom-right side of the footer. For more information, please refer to Fiori's Resizable Card Layout

Dragging

Cards can be dragged around the screen by clicking and holding on the card’s header. The mouse cursor will change to the multi-directional cursor to indicate the dragging interaction is enabled. This interaction allows users to move cards based on their preferences. While cards can be dragged freely on a dynamic canvas, there are some restrictions for some screens in certain products: for example, homepages with a fixed activity card in the centre, the available dragging areas would be on both sides of the activity cards and dragging other cards will not change its position.

Additional Interactions

There are additional interactions that user can have with a card, such as expanding the card to reveal more information, filtering the card content, saving a card as favourite, and editing the entry-level content etc. The general advice is that only offer actions the users really need in a specific context.

Specifications

Cards can vary in layouts and sizes, and they should be designed to support the content contained. This section shows some common card layouts as examples to help showcase the variety and specifications.

Base structure

<div> <div>Badge</div> <div>Component</div> <div>Specifications</div> <div>Details</div> </div> <div> <div></div> <div></div> <div> <p>@sapUiTileBackground;</p> <p>@sapElement_BorderCornerRadius</p> <p>0.0625rem solid, @sapUiTileBorderColor;</p> <p>@sapUiContentShadow0;</p> </div> <div> <p>#FFFFFF;</p> <p>4px;</p> <p>1px solid, #transparent;</p> <ul> <li><em>First layer:</em> X:0, Y:0, blur:0, spread:1, #000000, alpha:10;</li> <li><em>Second layer:</em> X:0, Y:2, blur:8, spread:0, #000000, alpha:10;</li> </ul> </div> </div> <div> <div></div> <div></div> <div> <p>@sapUiTileBackground</p> <p>0.0625rem solid, @sapUiPageHeaderBorderColor;</p> </div> <div> <p>#FFFFFF;</p> <p>1px solid, #D9D9D9;</p> </div> </div> <div> <div></div> <div></div> <div>sapUiTileBackground</div> <div>#FFFFFF;</div> </div> <div> <div></div> <div></div> <div> <p>3rem;</p> <p>@sapUiPageFooterBackground;</p> <p>0.0625rem,</p> <p>@sapUiPageFooterBorderColor;</p> </div> <div> <p>48px;</p> <p>#FFFFFF;</p> <p>1px, #D9D9D9;</p> </div> </div>

<div> <div>Badge</div> <div>Component</div> <div>Specifications</div> <div>Details</div> </div> <div> <div></div> <div></div> <div> <p>0.75rem;</p> <p>1rem;</p> </div> <div> <p>12px;</p> <p>16px;</p> </div> </div> <div> <div></div> <div></div> <div> <p>@sapFontFamily;</p> <p>@sapMFontHeader5Size;</p> <p>@sapUiFontHeaderWeight;</p> <p>@sapTextColor;</p> <p>left;</p> <p>0.25rem between the Title and Subtitle</p> </div> <div> <p>72</p> <p>16px;</p> <p>normal (regular);</p> <p>#32363A;</p> <p>left;</p> <p>4px between Title and Subtitle</p> </div> </div> <div> <div></div> <div></div> <div> <p>@sapFontFamily;;</p> <p>@sapMFontMediumSize;</p> <p>@sapUiFontHeaderWeight;</p> <p>@sapContent_LabelColor;</p> </div> <div> <p>72</p> <p>14px;</p> <p>normal (regular);</p> <p>#6A6D70;</p> </div> </div> <div> <div></div> <div></div> <div> <p>sap.m.Button;</p> <p>0.5rem (between buttons);</p> </div> <div> <p><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-TertiaryTransparentHighlightButton">Tertiary button;</a></p> <p>8px;</p> </div> </div> <div> <div></div> <div></div> <div>1rem;</div> <div>16px;</div> </div> <div> <div></div> <div></div> <div> <p>sap.m.Button;</p> <p>0.5rem (between buttons);</p> </div> <div> <p><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-TertiaryTransparentHighlightButton">Tertiary button</a>, <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-SecondaryGhostButton(withnoBackground)">Ghost button</a></p> <p>8px;</p> </div> </div> <div> <div></div> <div></div> <div> <p>absolute; (bottom: 0; right: 0);</p> <p>FPA Icons;</p> <p>resize-corner; (&#xe7b4);</p> <p>1rem;</p> <p>@sapContent_IconColor;</p> </div> <div> <p>16px;</p> <p>#0854A0;</p> </div> </div>

<div> <div>Badge</div> <div>Component</div> <div>Specifications</div> <div>Details</div> </div> <div> <div></div> <div></div> <div> <p>1rem, 0.625rem;</p> <p>1rem;</p> </div> <div> <p>16px, 10px;</p> <p>16px;</p> </div> </div> <div> <div></div> <div></div> <div> <p>FPA Icons;</p> <p>3rem;</p> <p>@sapUiContentIconColor;</p> <p>0.75rem;</p> </div> <div> <p>FPA Icons;</p> <p>48px;</p> <p>#0854A0;</p> <p>12px;</p> </div> </div> <div> <div></div> <div></div> <div> <p>@sapFontFamily;</p> <p>@sapMFontHeader5Size;</p> <p>@sapUiFontHeaderWeight;</p> <p>@sapTextColor;</p> <p>left;</p> <p>0.25rem between the title and subtitle:</p> </div> <div> <p>72</p> <p>16px;</p> <p>normal (regular);</p> <p>#32363A;</p> <p>left</p> <p>4px; between title and subtitle</p> </div> </div> <div> <div></div> <div></div> <div> <p>@sapFontFamily;</p> <p>@sapMFontMediumSize;</p> <p>@sapUiFontHeaderWeight;</p> <p>@sapContent_LabelColor;</p> <p>left;</p> </div> <div> <p>72</p> <p>14px;</p> <p>normal (regular);</p> <p>#6A6D70;</p> <p>left;</p> </div> </div> <div> <div></div> <div></div> <div>0.5rem;</div> <div>8px;</div> </div> <div> <div></div> <div></div> <div> <p>FPA Icons;</p> <p>0.75rem;</p> <p>@sapFontSmallSize;</p> <p>@sapContent_LabelColor;</p> <p>0.25rem (between Icon and Text);</p> <p>Spacing between two metadata information: 0.5rem;</p> </div> <div> <p>FPA Icons</p> <p>12px;</p> <p>12px;</p> <p>#6A6D70;</p> <p>4px (between Icon and Text);</p> <p>Spacing between two metadata information: 8px;</p> </div> </div> <div> <div></div> <div></div> <div> <p>sap.m.Button;</p> <p>0.5rem (between buttons);</p> </div> <div> <p><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-TertiaryTransparentHighlightButton">Tertiary button</a>, <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-SecondaryGhostButton(withnoBackground)">Ghost button</a></p> <p>8px;</p> </div> </div>

List Content (Avatar, Item Name, Attribute, Timestamp, and Action Button)

For details of standard one-line and two-line list content, please refer to theFiori specifications.

<div> <div>Badge</div> <div>Component</div> <div>Specifications</div> <div>Details</div> </div> <div> <div></div> <div></div> <div> <p>S (3rem);</p> <p>All avatar colors should be possible;</p> <p>0.5rem;</p> </div> <div> <p>48px;</p> <p>All avatar colors should be possible;</p> <p>8px;</p> </div> </div> <div> <div></div> <div></div> <div> <p>@sapFontFamily;</p> <p>@sapMFontHeader5Size;</p> <p>@sapUiFontHeaderWeight;</p> <p>@sapTextColor;</p> </div> <div> <p>16px;</p> <p>normal (regular);</p> <p>#32363A;</p> </div> </div> <div> <div></div> <div></div> <div> <p>@sapFontFamily;</p> <p>@sapMFontMediumSize;</p> <p>@sapUiFontHeaderWeight;</p> <p>@sapContent_LabelColor;</p> </div> <div> <p>72</p> <p>14px;</p> <p>normal (regular);</p> <p>#6A6D70;</p> </div> </div> <div> <div></div> <div></div> <div> <p>@sapFontFamily;</p> <p>@sapMFontSmallSize;</p> <p>@sapUiFontHeaderWeight;</p> <p>@sapContent_LabelColor;</p> </div> <div> <p>72</p> <p>12px;</p> <p>normal (regular);</p> <p>#6A6D70;</p> </div> </div> <div> <div></div> <div></div> <div>sap.m.Button;</div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-TertiaryTransparentHighlightButton">Tertiary button</a></div> </div> <div> <div></div> <div></div> <div>1rem;</div> <div>16px;</div> </div>

Support

If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.