Multi-message handling helps users manage multiple messages within an app, making it easy for users to take action.  

Anatomy

Multi-message handling follows the basic structure of a bottom sheet, prioritizing message components based on their importance. Error messages should appear first to capture the user’s attention.

A. Banner

The banner contains:

• Optional icon or image
• Message summary
• Button

B. Bottom Sheet

The bottom sheet displays message details.

C. Section Header (Optional)

The section header includes a title and action button for additional functions.

D. Filter Feedback Bar (Optional)

The filter feedback bar allows users to quickly filter messages.

E. Message Item

The message item includes an icon or image, message content, and an optional action button to support user interactions.

Behavior and Interaction

Trigger

The banner notifies the user of messages. Tapping the banner opens the multi–message handling bottom sheet for detailed viewing and interaction. 

Tap to Scroll

When the bottom sheet is open, tapping a message item automatically scrolls to the related field or section with the error, allowing users to address the issue. 

Clear

Tapping the “Clear All” button removes all messages displayed in the bottom sheet. 

Tapping the “Clear” button in a section header removes only the messages within that specific section. 

Resources

SAP Fiori for iOS: Error Handling 

Related Components/Patterns: Banner, Bottom Sheet, Header, Filter Feedback Bar, Object Cell 

An avatar is a visual element used to display user profiles, initials, placeholders, icons, or business-related images, such as logos and product pictures.

Usage

Consider using round avatars to represent user profiles and square avatars for objects.

• Don’t use avatars as interactive icons. Instead, use an icon button.
• Don’t display more than one letter in an initial.

Anatomy

A. Avatar

The avatar is a round or square container that contains an image, an icon, or an initial. One alphabetical character is supported for an initial.

B. Badge (Optional)

An optional badge can be placed in the bottom right corner on top of the avatar to display a status.

C. Avatar Group

Multiple avatars can be grouped horizontally in an avatar group. To avoid clutter, we recommend displaying no more than six avatars. The last avatar can indicate the number of additional avatars when there are too many avatars to display.

The avatar group supports round avatars with a size of 16dp (default) or 24dp.

D. Label (Optional)

A short label can be displayed together with the avatar group to provide descriptive information.

Behavior and Interaction

Since an avatar is typically part of a specific component, such as an object cell, card, or object header, it is not interactive and serves a decorative or informational purpose.

Wrapping Behavior

The avatar group label should be short and concise. In cases where the label is longer than the allocated space, it wraps to a new line by default. As a nested component, the wrapping behavior can be overridden by the parent component. If the label gets truncated, the user should still be able to view the full label, for example, by navigating to a detail page or by displaying a tooltip on long press.

Variations

Size

The size of an avatar is customizable, preferably in increments of 8dp. The avatar group can display avatars with a size of 16dp or 24dp.

Shape

Depending on the context, the avatar can be round or square with rounded corners.

Color

By default, the avatar uses the SAP Fiori accent color palette. If required, the color theme can be customized or branded colors can be introduced.

Layout

Depending on the use case, one label can be placed before, after, below, or above the avatar group.

Resources

Development: Avatar, Avatar Stack

SAP Fiori for iOS: Avatars and Images 

SAP Fiori for Web: Avatar

The floating action button or FAB is a button variant that displays the most prominent action on screen. It is typically placed on the bottom corner of the screen, but it can also be placed in the center and remains persistent as users scroll through content.

Usage

Anatomy

FAB & Extended FAB 

Behavior and Interaction

Variations

Resources

Development: Button

Material Design: FAB

Related Components/Patterns: Button, Navigation Rail

The illustrated message communicates empty, error, and success states through a combination of solution-oriented messages, engaging illustrations, and a conversational tone. The illustrated message turns a situation, even a negative one, into a better experience for your users, while ensuring consistency.

Usage

Use the illustrated message when you want to improve the user experience for one or more message states in your application. The illustrated message’s content should be concise but prioritize clear messaging.

Turn a negative event into a positive one

Take time to design and write a solution-oriented message. Be precise in your wording and use appropriate illustrations.

Ideally, a negative event in a software product doesn’t generate negative emotions. A well-designed illustrated message that leaves users feeling understood and valued can result in a neutral or even positive feeling. Remember that users will benefit from thoughtfully crafted illustrated messages every time they encounter them – perhaps even daily.

Always write a coherent, solution-oriented message

Make sure that the illustration, message, and call to action work together as one to clarify the situation. Always provide a message. Never use an illustration without a message. A message combined with an illustration is more powerful than a message alone.

Tailor your message to your use case

Always ensure that the default text fits in the context. If not, replace it or make it more precise.

Example:
Default text: No results found / Try changing your search criteria.
Adapted text (supplier table used with a filter bar): No suppliers found / Try adjusting your filter settings.

We recommend replacing generic terms such as “data” and “object” with your specific business object.

Example:
Default text: There’s no data yet / When there is, you’ll see it here.
Adapted text: There are no orders yet / When there are, you’ll see them here.

Use the illustrated message to communicate high-priority information

Place the illustrated message in dialogs, cards, and at a page level rather than a snackbar or a banner to indicate high-priority empty, error, and success states.

Prioritize the message over the illustration

When the illustrated message is placed in a container that does not fit all the elements, we recommend removing the illustration so that the user can read the entire message.

Anatomy

Adaptive Design

Variations

Resources

A menu displays a list of relevant options for the user that can be triggered from buttons, icons, or actions.

Usage

A menu enables users to view and select from a group of choices. A menu container is opened by the user tapping on an interactive element, for example, an overflow icon.

• Use a menu when the number of actions exceeds the component’s action limit.
• Ensure it is simple for users to open, close, and select from the menu, with the most prominent actions shown first.
• Ensure the menu is placed on the screen where the content is fully visible to users.

• Don’t use a menu for a single action.
• Don’t hide important actions.
• Don’t place the menu in a position where it will be cut off by the screen. Instead, set the menu above, left, or right of the interactive element.

Anatomy

Behavior and Interaction

Adaptive Design

Variations

Resources

Development: DropdownMenu, ExposedDropdownMenu, DropdownMenu

Material Design: Menus

The card header is the uppermost part of the card that provides important information about the card and its related content on the detail page. The optional card header allows for a quick overview of key information, such as the title, subtitle, and status of the card.

Usage

When using the card header, only include essential information about the card‘s content. The card system offers various components for this purpose. Consider the following aspects when using the card header: 

• In the main header, only include a title, subtitle, left accessory, icon button, and/or a counter. 
• In the extended header, only include status info label, rating controls, tags, text, and/or a KPI. 
• For the main header, use a maximum of three rows. 
• For the extended header, use a maximum of three rows. 
• Use only an icon button within the card header that directly impacts the card, for example, to favorite or bookmark the card). 
• Make sure that the title on the header image has a good contrast to the image. For example, use a white title on a darker image and a black title on a lighter image. 
• Maintain consistent positioning of the components in the card header throughout the app. For example, if one card header contains tags in the first line, all the other cards in your app should have them too. 
• Use the counter only if the card body includes list components such as card cells or data table. 

• Don’t overcrowd the card header with too many elements.  
• Don’t place other components, such as a key value cell or an avatar row component, in the card header. Use the card body instead. 
• Don’t use the card header to provide more detailed information on the card, use the card body instead.
• Don’t add more than three rows to the main header. 
• Don’t add more than three rows to the extended header. 

Anatomy

A. Header Container

The header container is the element that holds the header image, main header, and extended header of the card. 

B. Header Image (Media)

The header image, also known as “media” in the SDK, is an optional decorative element that allows you to include an image that matches the card context. 

C. Main Header

The main header contains essential information about the card, such as a title, subtitle, left accessory, icon button, and/or a counter. However, these elements, including the main header itself, are optional components. 

D. Extended Header

The extended header contains additional elements that provide more information. These elements can be a status info label, rating controls, tags, text, and/or a numeric value in the form of a KPI. Only one component can be placed in one row. The content of a row is limited to one line by default, but it can be configured to wrap. 

Variations

Main Header Components

All components in the main header are optional, including the title. If there is already a title in the header image, it is not recommended to duplicate it or use it for other information in the main header. 

A. Title

B. Subtitle

C. Left accessory

D. Icon button

E. Counter

Extended Header Components

Every element in the extended header is optional. To maintain consistency, it’s advisable to arrange the components in the same order across different rows. For instance, if your card includes a status in the first row, it’s recommended to place the status in the same position for other cards throughout your app.

A. Status info label

B. Text

C. Rating control

D. Tags

E. KPIs

Behavior and Interaction

Opening a Menu

Users can open a menu with host actions that directly impact the card, such as hiding the card. To close the menu, users can tap anywhere on the card or tap the icon button again. A common example is the overflow button or a filter option for cards.

Action Button 

If a card only requires one specific action instead of multiple actions, you can choose to directly place the corresponding icon button on the card. This eliminates the need for the overflow menu. 

Resources

Development: Card System

SAP Fiori for iOS: Card Header 

Related Components/Patterns: Cards Overview, Card Body, Card Footer

The card footer is the bottom part of a card that contains important or routine actions that directly impact the card, such as “Approve” or “Submit”. The footer can accommodate a maximum of two action buttons. 

Usage

When using the card footer to integrate important user actions related to the content or functionality of the card, consider the following aspects: 

• Include only one or two of the most important and routine actions in the card footer. 
• If two buttons are used, always place the primary action on the right side of the footer. 
• If two buttons are used, place the less important and secondary action on the left side of the footer. 
• Ensure that the button’s wording reflects the action that will be performed after tapping on the button. 
• Use short and concise button labels. 

• Don’t include more than two buttons in the card footer.  
• Don’t place an overflow button in the card footer. Having overflow buttons in both the footer and header might lead to visual ambiguity, as they would look identical. 
• Don’t use long button labels. If the button label needs to be very long, use icon buttons or only one button. 

Anatomy

A. Card Footer Container

The card footer container holds one button that is right-aligned by default or set to full width, or two buttons that are right-aligned within the card footer container.

B. Primary Action Button

The contained action button is used to highlight the most important action. Only use one primary action in a card. We recommend using the contained button style for actions that trigger or complete a task. 

C. Secondary Action Button

The tonal action button is used for actions that are not the primary action. If the card doesn’t have a clear primary action or if the displayed actions are equally relevant, the card footer can include only tonal or text buttons. If the action is destructive, use the tonal negative style to warn users about taking extra precautions before performing an action. 

Behavior and Interaction

Tapping on the button in the card footer performs the indicated action. 

User-Triggered Feedback Indicator

A user-triggered feedback indicator (progress indicator) refers to a visual element or cue on the card that provides feedback to the user as they perform the action. This indicator is triggered by the user’s actions and is designed to provide a response or confirmation. The overlay informs the user of the affected area that the content is not actionable during the process. Users can still navigate and take actions on other items that are not affected.

Depending on the use case, consider using a short, clear message (see snackbar) about the processes that have been performed to ensure that the user is informed.

Resources

Development: Card System

SAP Fiori for iOS: Card Footer

Related Components/Patterns: Card Overview, Card Header, Card Body, Buttons 

The card body is the central part of the card that is used to display additional information alongside the content shown in the card header. By using the card body, several components from the SAP BTP SDK for Android can be integrated into a card, enabling the recreation of card types such as object cards, list cards, and many more.

Usage

While the card body is optional, it can be used for different use cases. To improve user comprehension, we recommend including additional details. Avoid using the card body for complex tasks; instead, provide additional functionality and detailed information on a subsequent details page that users can access by pressing the card.

To maintain compact card sizes, be mindful of not overcrowding the card body with too many components. Additionally, consider the following aspects when adding components to the body:

• Limit the number of components in the card body.
• Use components that are relevant to the context of the card.
• Only use components that are listed below in the Variations section or variants of components that have been adapted for cards.
• Make sure that the placement of the components within the card body is consistent throughout your app. For example, a KPI is placed in the body and centered aligned, other cards in your app should follow the same pattern.

• Don’t include any components in the card body that are not listed below.
• Don’t overcrowd the card body with too many elements.
• Don’t add additional components such as a status or tags to the card body. Use the card header for that.

Anatomy

The card body is a single container that can hold various components. The container is flexible in height to accommodate a reasonable number of UI components until the maximum height of the entire card is reached.

Variations

In addition to the SAP Fiori for Android components that can be added to the card body, the card system also offers variants. These variants are specifically tailored to seamlessly fit within a card. The reduced horizontal and vertical spacing of the variants compared to the default components, ensuring a concise card design.

You can include the following components in the card body: 

Existing Components

A. Avatar row 

B. Header

C. Key value cell

D. Status info label

E. KPIs

F. KPI progress view

G. Illustrated message

H. Calendar

Variants for Cards

A. Card Cell

The card cell component is a simplified version of the object cell, featuring a thumbnail, title, subtitle, footnote, and right accessories. There are a few variations for the right accessories such as a small KPI, status info label, two icon buttons, or a single button.

B. Divider/Spacing 

The divider can be placed between elements to better separate them visually or by hiding the divider a white space can be applied. 

C. Text

The text component can be used to add a short description on the card. The description should provide additional information related to the content. Keep the description short and precise to prevent it from wrapping into multiple lines.

D. Custom Composable

The custom composable allows custom components to be integrated into the body container. It provides flexibility in cases where the existing components included in the body do not support the use case. For example, a diagram or “live” map can be integrated.

E. Image

You can use an image in the card body to highlight information, such as an address of a hotel.

F. Data Table

The data table provides a title for each of the two available columns. You can have up to three entries. To accommodate various use cases, you can configure entries to adjust the text color, icon, and placement of an icon. You can choose to display a divider below the table, along with a text indicating that there are more items in the data set.

Behavior and Interaction

States

Use a suitable illustrated message to communicate different states.

For example, when there is no relevant content or data to be displayed in the body, include an empty state indicator. This indicator serves as an informational message for users, notifying them that there is currently no information or data available, or that new data or information needs to be generated.

Resources

Development: Card System, Card Cell

SAP Fiori for iOS: Card Body

SAP Fiori for Web: Card Content

Related Components/Patterns: Cards Overview, Card Header, Card Footer

The rating control can be used in various contexts to provide insight regarding the opinions and preferences of an object.

Anatomy

A. Icon

The icons represent the average object rating value through several states: on, off, and half. The states of these icons depict a rating from a scale of one to five.

B. Counter/Label

The counter or label supplements the rating. It can be used to display the number of ratings, the exact rating value, and more.

Behavior and Interaction

The rating control is currently display-only.

Variations

Size

Small vs. Large

The rating control can be displayed in a small or large format depending on the fit to context.

Counter/Label

Without vs. With

The counter or label for the rating can be hidden as needed.

Color

Default vs. Accent

The accent color for the icons can provide a unique variation when needed.

Resources

Development: Rating Control, FioriRating

SAP Fiori for iOS: Rating Control

SAP Fiori for Web: Rating Indicator

The staggered layout for cards is a design pattern where cards are arranged in a flexible, grid-like structure, with each card adapting to the available space while maintaining alignment with adjacent cards. It optimizes space usage and provides an aesthetically pleasing visual layout.

Usage

• Ensure that cards in the staggered layout contain related content.
• If your app includes multiple card layouts, such as a carousel, add an optional title to your staggered layout container.

Don’t use a staggered layout for your tablet app when you have only a few cards.

Anatomy

Container with Cards

The cards have a consistent width, which is based on the number of columns determined by the window size class. The height of each card can vary depending on the content, resulting in an asymmetric view.

Margins

Margins are the spacings between the content and the outer edges of the window area. Margin widths are defined using fixed values for each window size class and change at different breakpoints to better fit the screen size.

Behavior and Interaction

Scrolling

Cards scroll vertically in a list and staggered layout.

Empty States

If there is no card in the list, it is important to use an empty state indicator in the layout container to communicate this information. This indicator serves as an informative message for users to let them know that no information or data is currently available or that some information needs to be created.

Adaptive Design

The number of columns may increase based on the screen width, allowing more cards to be shown side by side, resulting in a grid-like look that enhances readability.

For compact window size classes, cards are arranged in a vertical list, which span across the entire width of the screen and provide a high density of information.

For medium and extended window size classes, the layout changes to a staggered layout, with cards placed at the top and then left-most position. This ensures a seamless layout without gaps.

If there is a navigation rail or navigation drawer, the number of columns is reduced and adapts to the remaining screen width.

Additionally, you can also combine layouts. However, if a staggered and a carousel layout are used on the same page, it creates visual imbalance of the card spacing caused by the outer margins of the different layouts.

Resources

Development: Card System

SAP Fiori for iOS: Masonry Layout

SAP Fiori for Web: Overview Page

Related Components/Patterns: Cards Overview, Carousel Layout

A carousel layout is a design pattern that displays multiple cards horizontally, one after the other, with a glimpse of the next card visible on the edge of the screen. This partial visibility encourages users to swipe or scroll left or right to reveal more cards.

Usage

Use a carousel to maximize the amount of information displayed and preserve the context without making the user scroll further down the page. The cards in the carousel should be closely related to each other, allowing users to anticipate the kind of content they will discover when interacting with the carousel.

For compact window size classes, we recommend displaying a maximum of five cards, as users are unlikely to engage with more than that. For medium and extended window size classes, more cards can be added, and their width is automatically adjusted. When using a carousel, consider the following aspects:

• For compact window size classes, we recommend displaying a maximum of five cards.
• For medium and extended window size classes, you can show up to eight cards.
• Ensure that the cards have related content.
• Keep the height of the cards compact to avoid additional vertical scrolling.
• Make sure the carousel container is fully visible on the screen.

Don’t use a carousel if there are multiple types of cards. Use a staggered layout instead or add a section header with action to a deeper navigation to show all elements.

Anatomy

A. Container with Cards

The height of the carousel container is determined by the card with the most content that is currently visible to the user. All cards have the same height and cards with less content are stretched to match the height of the tallest card and align with the carousel container. This can lead to white space between the body and the footer, which is why the content of a card should always be compact and concise. The footer of the card is always aligned to the bottom edge. For more information, refer to cards overview.

B. Margin

Margins are the spaces between the content and the left and right edge of a window area. Margin widths are defined using fixed values for each window size class and change at different breakpoints to better fit the screen size. In a carousel, the margins on the left and right are not equal to cut the card at the right side of the screen.

Behavior and Interaction

Scroll Snapping

Scroll snapping refers to the effect of cards always snapping into place at specific, predefined positions during scrolling, rather than scrolling freely.

This gives the user a sense of precision and makes scrolling more pleasant.

Navigation

If there are too many cards in a carousel, you can add a header with a “See All” interaction. Tapping on “See All” navigates the user to a page that displays all cards from the carousel group in a list or staggered layout, depending on the window size class.

Empty States

If there is no card, it is important to display an indicator for an empty state in the carousel. This indicator serves as an information message for users to let them know that no information or data is currently available or that some information needs to be created.

Adaptive Design

A carousel shows fewer cards for a compact size class, while a medium and expanded window size class shows more, as there is more space available on the page. The height of a carousel container should be fully visible on the screen, regardless of the screen size.

If there is a navigation rail or navigation drawer, the number of columns is reduced and adapts to the remaining screen width.

You can also combine layouts. However, if a carousel and a staggered layout are used on the same page, it creates a visual imbalance of the card spacing caused by the outer margins of the different layouts.

Resources

Development: Card System

SAP Fiori for iOS: Carousel Layout

SAP Fiori for Web: Carousel (SAPUI5), Carousel (Web Component)

Related Components/Patterns: Layouts Overview, Staggered Layout, Cards Overview

A card provides brief, related pieces of information and serves as an entry point, teaser, or preview to more detailed content. By pressing on the card, users can select the card and navigate to a dedicated page with more detailed information.

Usage

The card system for SAP Fiori for Android provides an advanced approach to utilizing cards, which offer a convenient way for your app to display content from various sources. It consists of a toolkit of nested components that enable the creation of diverse cards to meet the requirements of SAP products. These nested components encompass a wide range of functionalities, such as data table, key value cell, KPIs, and more. Additionally, the card system provides enhanced customization and flexibility, along with adaptable sizing options to accommodate different form factors and layouts, such as list, staggered, or carousel layout for cards. When incorporating cards into your app, it is crucial to keep the following aspects in mind:

• A card should focus on a single topic and be coherent in itself.
• A card should serve as an entry point, teaser, or preview to more detailed content.
• A card should be a short representation of a conceptual unit.
• A card should present information in a compact and easily scannable format.
• Incorporate cards into your app design to provide users with a quick overview of various information.
• Ensure that there is a clear indication on the card when a user selects it and an external app is launched, for example, by incorporating an icon that indicates an external app is launched.

• When designing your layout, don’t group components in a container with round corners. This style does not automatically transform a component into a card.
• Don’t place unrelated elements within a card.
• Don’t overload the user by including an excessive number of UI elements within a card.

Anatomy

The content of a card is organized in so-called blocks. The height of a card is determined by its content. However, it’s crucial to keep in mind the maximum permitted height of 520dp.

A. Card Container

The card container is the element that holds the header, body, and footer of the card.

B. Header

The card header, the card’s uppermost part, contains essential information about the card and its associated detail page content. It provides a quick overview of fundamental details such as the title, subtitle, and status of the card. More information on the header can be found in the Card Header article.

C. Body

The card body is the central part of a card that is used to provide additional information alongside the content shown in the card header. This allows for the presentation of in-depth details, data, or graphics relevant to the card’s context. More information on the body can be found in the Card Body article.

D. Footer

The card footer, located at the bottom of the card, is used for important or routine actions that directly impact the card’s functionality, such as “Approve’ or “Submit” actions. More information on the footer can be found in the Card Footer article.

Behavior and Interaction

Interaction States

Selecting a Card

When a user presses a card, the ripple effect serves as a clear and immediate feedback to indicate their selection.

Selecting an Interactive Element

When a specific element within the card, such as a card cell, is designed to be interactive, it is visually indicated by a ripple effect.

Navigation

When a card is selected, it triggers navigation to a designated page that provides more details, such as a list report page or an object details page.

When users engage with an interactive element within the card, such as an object cell, it triggers navigation to a dedicated details page that corresponds to the specific subject of that element.

Empty States

When there is no relevant content or data to display, it is important to include an empty state indicator within a card. This indicator serves as an informative message for users, letting them know that there is no information or data available at the moment or that new data needs to be created or uploaded.

If a component within the card fails to load, an empty state indicator is displayed in the body container.

Skeleton Loading

Skeleton loading is a design technique where a simplified and placeholder version of content is displayed to users while the actual data is being fetched or loaded. It provides users with a visual cue that content is on its way and improves the perceived performance of the interface.
There are three sizes based on the card blocks. This approach allows you to select a card size that approximately reflects the loaded card size.

Adaptive Design

The card system ensures that cards adjust seamlessly to different screen sizes and orientations. For compact window size classes, cards are designed to be narrower to accommodate the limited screen width of phones, making efficient use of the available space in a portrait orientation.

For medium and expanded window size classes, cards can have a wider layout to take advantage of the increased screen real estate, resulting in a more spacious and visually appealing presentation of content. More information about adaptive design can be found in carousel layout and staggered layout.

Variations

Data Table Card

Create a data table card to display key data points about an object in a two-column format.

List Card

Create a list card to display a preview of a set of items or objects in a vertical list format.

Object Card

Create an object card to display a preview of an object.

Resources

Development: Card System

SAP Fiori for iOS: Cards Overview

SAP Fiori for Web: Cards (SAPUI5), Cards (Web Component)

Related Components/Patterns: Card Header, Card Body, Card Footer, Carousel Layout, Staggered Layout

Card layouts are structured containers that determine how cards are arranged and displayed in a user interface. These layouts control the placement, order, and visual presentation of cards, ensuring an aesthetically pleasing design. The layouts adjust to multiple devices, window size classes, and orientations, ensuring consistency across layouts.

Usage

A layout is used to group cards with similar content, ensuring a visually structured arrangement. The proper usage of a grid layout draws the user’s attention to the most important cards on a page, resulting in improved efficiency and higher quality.

Make sure that the layout is optimized for different window size classes to display the cards in the best way possible. Find more information in the staggered layout and carousel layout articles.

Anatomy

When designing card layouts for native apps, consider the following key factors that determine the horizontal width of the screen.

A. Columns

Content is organized into columns on the screen. This is where the cards are placed.
In responsive layouts, the column width is not defined by fixed values. This allows the content to adjust to any screen size. The number of columns displayed in the grid is determined by the breakpoints of window size classes, ranging from 4, 8, or 12 columns.

B. Gutters

A gutter is the space between columns that helps to visually separate content.
Gutter widths have predefined values at each breakpoint range. To enhance the content’s adaptability to a given screen size, gutter widths can change at different breakpoints.

C. Margins

Margins are the spaces between the content and the left and right edge of a window area. Margin widths are defined by specific values for each window size class and change at different breakpoints to better fit the screen size.

Behavior and Interaction

Scrolling

Cards can be scrolled vertically or horizontally, depending on the layout. You can also combine different layouts, for example, a carousel with cards and a list with cards below it.

Adaptive Design

The layouts are designed to be compatible with multiple devices. They change according to the window size class and automatically adjust the number of columns to ensure a visually appealing and user-friendly layout. Depending on the window size class, the card width and height adjust automatically, ensuring that the content remains fully visible.

If there is a navigation rail or navigation drawer, the number of columns decreases and adjusts to the remaining screen width.

Resources

SAP Fiori for Web: Cards (SAPUI5), Cards (Web Component)

Related Components/Patterns: Carousel Layout, Staggered Layout, Cards Overview

Tags are used to display quick and useful bits of information to the user, such as keywords, labels, categories, or statuses.  

Usage

Tags display complementary information that relates to the object. They use a different visual representation than plain text and serve as independent bits of information. When incorporating tags into your app, it is crucial to keep the following aspects in mind:

• Keep tag labels concise.
• It is recommended to maintain wording to a maximum of two words per tag.

• Don’t write full sentences within a tag.
• Don’t place icons or images within a tag.
• Don’t overload the user by including an excessive number of tags or very long text values.

Anatomy

A. Container

The are two styles available for containers: filled and outlined.

B. Label

The label indicates keywords or other bits of information.

Behavior and Interaction

Tags are not interactive. If there is more than one tag, they line up in a horizontal layout one after the other. The tag row can be configured to wrap to the next line depending on the parent container.

Variations

Color

Default vs. Accent

The default tag color is grey, but it can also be displayed in many different colors of the accent color palette.

Resources

SAP Fiori for iOS: Tags

Related Components/Patterns: Cards Overview, Object Header, Object Cell

The status info label component can be used to provide complementary bits of information.

Usage

The status info label displays complementary information that relates to the object. It is a flexible combination of a text value and an icon. When incorporating a status info label into your app, it is crucial to keep the following aspects in mind:

• Keep text values concise.
• Customize icon and label layout based on your needs.

• Don’t use complete sentences within a status info label item.
• Don’t include links. Status info label items are not interactive.
• Don’t overload the user by including an excessive number of status info label items within a row or a stack.

Anatomy

A. Icon (Optional)

The icon is a visual illustration that can complement the text value or be used independently. If it is combined with a label, it can be placed as a leading or trailing element.

B. Label (Optional)

The label indicates short information bits such as keywords, categories, or status. The text value can be used independently or combined with an icon.

C. Dot (Optional)

A dot can be used to separate status info label items in a horizontal alignment.

Behavior and Interaction

Status info label items are not interactive. If there is more than one status info label item, they may either line up in a horizontal layout one after the other or be stacked under each other. A stacked column can be either left or right-aligned.

Variations

Components

A. Icon Only

Shows visual information such as an icon, image, logo, or avatar.

B. Label Only

Text value that implies a brief description, for example, it can show the priority or urgency of the object’s status. Maintain wording to a maximum of two words.

C. Leading Icon

A leading icon is placed in front of the label.

D. Trailing Icon

A trailing icon follows the label.

Layout

Horizontal vs. Stacked

Status info label items can be arranged horizontally, optionally dividing them with a dot, and can either be wrapped to the next line or be stacked vertically.

Color

Default vs. Semantic

The default tag color is grey, but status info label items can also be displayed in many different colors of the semantic color palette.

Resources

Development: FioriStatusInfoLabel

Related Components/Patterns: Cards Overview, Object Header, Object Cell

KPIs (key performance indicators) are metrics used to evaluate the success of an organization, an individual, a group, or an activity. They serve to highlight the current value of an object or as a summary of the object. KPIs can be displayed in a header, in the content area of an object, on a card, or in a modal window.

Usage

• Use KPIs for numerical metrics.
• Use abbreviations for units of measurement in the KPI prefix and/or suffix that may be too long. For example, “m” or “mil” can be used in place of “millions”.

• Don’t use KPIs for non-numerical metrics.
• Don’t mix standard KPIs with progress view KPIs when nesting KPIs in an object. Standard KPIs should only be grouped and displayed with one another, likewise with progress view KPIs.
• Don’t write overly long or descriptive KPI labels. KPI labels should be concise while also clearly communicating the KPI meaning.

Anatomy

Standard KPIs and KPIs with Icons

A. Trend/Icon

The KPI icon is used to provide a visual representation of information related to the KPI metric. It defaults to a trend symbol for standard KPIs. With the KPI Icon variant, you can choose an icon from the Icon Explorer.

B. Prefix and Suffix

The KPI prefix and suffix are used to define units of measurement for the KPI metric and are placed right in front or after the KPI numeric value.

C. Value(s)

The KPI value is the core element of the component. It can either be a single value with one number or two values with a combination of numbers, prefixes, and suffixes, such as “15hr12mins”.

D. Label

The KPI label is used to provide additional information about the KPI.

KPI Progress View

A. Progress View

The progress view displays a visual representation of completeness using a circular progress track.

B. KPI

The KPI is a component nested within the progress view KPI component. See information on KPIs above for anatomy.

C. Title

The progress view title is used to provide additional information about the overall KPI progress view.

Behavior and Interaction 

A KPI is a display-only component used to show a key figure.

Variations 

KPIs

Standard KPI

The standard KPI is available in three different sizes and can be highlighted with semantic colors. Standard KPIs may be used for measurements such as meters, Celsius, percentage, etc.

KPI with Icon

The KPI with icon is available in three sizes and can be highlighted with semantic colors. The iconography helps represents the KPI metric. For example, a document icon can be used to show there are files associated with a KPI.

KPI Progress View

The KPI progress view utilizes a circular form that represents the progress of its KPI metric. It can be used to show the step progress of a goal, percentage of completion of a task, and more.

Resources

Development: FioriNumericKpi, FioriProgressViewKpi

SAP Fiori for iOS: KPIs

Related Components/Patterns: Cards Overview, Card Header, Card Body

A circular progress indicator is a visual element that displays the status of ongoing processes, such as logging in, uploading files, or refreshing content in a circular shape. It typically consists of a circular track and a moving indicator that fills up the track as the progress increases.

Usage

Anatomy 

Behavior and Interaction 

Variations 

Checkout Use Cases

Checkout use cases are processing states triggered by user actions. During a checkout process, any user action on the affected content is not encouraged; it may interrupt the process. Use only the indeterminate variant in these cases. A checkout use case can be one of the following types:

Resources

Development: FioriCircularProgressIndicator

SAP Fiori for iOS: Feedback Indicators

Material Design: Progress Indicator

The step progress indicator is a progress indicator for tracking and displaying a user’s state in a user flow. It allows the user to navigate to another step in both the horizontal view and the vertical “All Steps” view.

A step can be displayed as either a regular step or a dynamic step.  

Usage

Anatomy

Horizontal View

A. Current Step Name (Optional) 

Name of the selected step. Show the current step name in the header if no step names are displayed under the step nodes. 

B. “All Steps” Button (Optional)

The “All Steps” button shows the total number of steps and directs users to an overview page of the steps. Show the “All Steps” button when the flow is long.

C. Step Node

The step node is a numeric circle that indicates the sequence of the flow. It also indicates the state of the step. You can also use letters or other simples to replace the number.

D. Line

A line is used to connect the nodes. Don’t use a line after the last node.

E. Step Name (Optional)

The step name of each step is shown below the step node. Only show step names when the header of the current step name is disabled.

Vertical View

A. Step Node

The step node is a numeric circle that indicates the sequence of the flow. It also indicates the state of the step. You can also use letters or other simples to replace the number.

B. Line

A line is used to connect the nodes. Don’t use a line after the last node. In the vertical view, the length of the line is dependent on the step name text.

C. Step Name

The step name of each step is shown next to the step node. In the vertical view, show the full text of the step name.

Behavior and Interaction

Text Wrapping

In the horizontal view, a step name allows truncation. In a vertical view, a step name allows text wrapping to show the full text. Always try to be concise for the names. Otherwise, it may distract users when they are focusing on the task on the screen.

The current step name truncates after one line. Full text is available in “All Steps” view.

A step name can wrap up to two lines. Adjust the width of the line to allow more space for the text. If any step name is longer than two lines, use the “All Steps” button to allow users to view the full text

Value States

Default

Idle state of an enabled step.

Active

Selected state of a step.

Complete

Triggered when required actions are complete and users have navigated to another step.

Error

Triggered when users already navigated to another step but required actions of this step are incomplete.

Error Active

Triggered when users tap on a step that has incomplete required actions.

Read-Only

A read-only step is a step that is not tappable.

Navigation and Interaction

Tap on the Node

When users tap on a step indicator node, they are navigated to this specific step.

If the step is already on the screen, the step node stays without moving.

If the user scrolls to tap a step beyond what was on the screen, the selected step is displayed as the first step in the indicator.

View All Steps

Users can tap on the “All Steps” button to view all steps vertically on a new screen.

If the user taps on a step from the “All Steps” list, they are navigated to the selected step. The selected step is displayed as the first step in the indicator.

Scrolling

Users can press and scroll left or right on the step progress indicator to view steps that are outside the screen. The indicator automatically comes back to the active step when users tap anywhere on the screen.

Variations

Dynamic Steps

Dynamic steps are used to indicate a sub-step or an indeterminate step. Same as regular steps, dynamic steps also have different value states: default, active, error, error active, and read-only.

Adaptive Design

A step progress indicator can adapt to both mobile and tablet sizes. For the tablet version, the horizontal step progress bar can have broader width for each step than the mobile version, and the “All Steps” view is displayed in a dialog window.

Resources

Development: StepperProgress

SAP Fiori for iOS: Step Progress Indicator

SAP Fiori for Web: Wizard Floorplan

Related Components/Patterns: Header, Persistent Footer, Dialog

A linear progress indicator visually represents the status of ongoing processes, such as logging in, uploading files, or refreshing content by animating an indicator along a fixed track. It communicates the state of an app and indicates available actions, such as whether users can navigate away from the current screen.  

Usage

Anatomy 

Behavior and Interaction 

Variations 

Resources

Development: FioriLinearProgressIndicator, FioriProgressBar

SAP Fiori for iOS: Linear Progress Indicator

Material Design: Progress Indicator

The calendar view provides a visual overview of a week, a month, or multiple months. It can filter and display different types of content, such as events, agendas, or schedules, based on the time dimension.

Usage

• Use calendar view to display a visual overview of a week or a month.
• Use calendar view to filter the information based on days. For example, events, tasks, and deadlines.

• Don’t use calendar view for date selection or multiple date selection in forms. Use pickers instead.
• Don’t use calendar view when the available screen space is limited and displaying the calendar permanently would take up too much space.

Anatomy

The structure is composed of four parts: calendar header (optional), week label container, date label container, and dragging handle (optional).

The space below the calendar view container is available for different configurations. for instance, using object cells as an agenda or timeline as a timesheet.

A. Calendar Header

The calendar header includes the title, subtitle (optional), and buttons.

B. Week Label Container

The week label container displays the seven days of a week. You can customize the format to match your local preference.

C. Date Label Container

The date label container shows all the days of the month/week in a grid view.

D. Dragging Handle (Optional)

The dragging handle provides a visual cue on the dragging behavior to expand the week view and collapse the month view.

Behavior and Interaction

Navigate

To navigate between months/weeks, users can use swiping gestures or tap on buttons. To ensure accessibility, it is important to provide visible navigation buttons that support all input channels such as touch screen, keyboard, and mouse. The buttons can be customized to your preference, for example, icon buttons or text buttons.

Expand and Collapse

If the calendar has a dragging handle (optional), users can expand it from week view to month view by swiping down. Similarly, they can collapse it from month view to week view by swiping up.

Back to Today

If the calendar includes a “back to today” button, the user can return to the current month/week by tapping on the button.

Variations

Calendar Views

There are different types of calendar views. Select the one that best suits the purpose of your app and start designing from there.

1. Month View (Default)
2. Week View
3. Expandable View – Users can switch from the default week view to month view by swiping up on the dragging handle.

Calendar Header

The calendar header provides the following layouts:

1. Left-Aligned

The title is left-aligned. A leading button or icon and a maximum of three trailing buttons are supported.

2. Center-Aligned

The title is center-aligned. A leading button or icon and a maximum of two trailing buttons are recommended.

The header also supports the following types of titles:

1. Single-Line Title

It can be used to show the displayed month and year, or the topic of the calendar.

2. Double-Line Title

It can be used to show the main title together with a subtitle for additional information.

3. Large Title

The title is emphasized by using a larger font size and white space. This design can be applied when showing a calendar on the home screen or at the top of the page.

The text contents can be customized to reflect the month/week on display.

Calendar Week Labels

The format of the calendar week labels can be customized to match your local preference. Besides, the calendar provides the following types of start day of the week:

1. Sunday (Default) – US Standard
2. Monday – Europe, Asia, Oceania Standard
3. Saturday – Middle East Standard

Calendar Day Labels

The calendar supports the following states:

1. Default – days of the month/week being displayed
2. Today – the current system date
3. Selected – the selected date
4. Today + Selected – only appears when the selected date is today
5. Out of Month – days in the previous or next month/week

Status Indicators

The calendar can display status information via status indicators, which should be a set of simple icons that are easy to recognize. A legend row is required to ensure that the status meanings are accessible.

Alternate Calendar

The calendar can show two calendar types on the same frame. The alternate calendar date label is displayed below the primary calendar date label, and the year and month are shown on the subtitle as a default. Below are the available calendar types for both the primary and the secondary calendar:  

1. Gregorian (default primary calendar)
2. Chinese
3. Hebrew
4. Islamic
5. Japanese

Adaptive Design

The calendar view adapts to different window sizes.

In compact windows, the width of the week labels and date labels expand to full width.

In medium windows, the week labels and date labels are fixed to 72dp.

In expanded windows, the week labels and date labels are fixed to 100dp.

Resources

Development: FioriCalendar

SAP Fiori for iOS: Calendar

Related Components/Patterns: Pickers, Object Cell, Timeline View

A contact cell, commonly found in an object detail, gives quick access to the various methods of communicating with a contact. A contact cell consists of an image, labels (headline, subheadline), description, and contact actions.

Anatomy

A. Detail Image (Optional)

A rounded frame that displays an image of a contact. If no image is available, an initial is displayed.

B. Headline

Used for the name of the contact.

C. Subheadline (Optional)

Can be used to add further information about the contact, such as a job role.

D. Actions

You can set four different actions – calling, video calling, messaging, and emailing.

On phones, there is a maximum of three actions, on tablets, a maximum of four.

Behavior and Interaction

Contact Cell

Tapping on the contact cell itself navigates the user to the profile detail screen of the contact.

Call Action

Tapping on the call icon triggers an alert prompting the user to confirm whether they want to make the call.

Video Action

Tapping on the video icon triggers an alert prompting the user to confirm whether they want to make the video call.

Message Action

Tapping on the message icon triggers a modal where the message can immediately be drafted and sent.

Email Action

Tapping on the email icon triggers a modal where the email can immediately be drafted and sent.

Adaptive Design

The contact cell is supported on both phone and tablet devices. The width of the name and title container is flexible and can be set by you.

You can use up to four actions, however, if four actions are used, a profile image can’t be used.

Resources

Development: ContactCell

SAP Fiori for iOS: Contact Cell

Related Components/Patterns: Object Cell

The navigation rail provides a top-level navigation to three to seven core destinations in an app.

Usage

A rail can be used as the sole navigation component on larger screens, such as tablet or desktop devices.

Anatomy

Behavior and Interaction

Adaptive Design

Variations

Resources

The navigation drawer provides access to different destinations in an app.
Navigation drawers can be permanently visible or opened and closed by tapping a menu icon.

Usage

Anatomy

Behavior and Interaction

Adaptive Design

Variations

Resources

The data table card provides a preview of historic data in a table format. Currently, data table cards display up to four rows and two columns that can be customized to fit a variety of use cases. This card can also be used as an entry point to a connected data table.

Usage

Anatomy

Adaptive Design

Variations

Resources

Development: DataTableCard

SAP Fiori for iOS: Analytical Data Table Card 

Related Components/Patterns: Cards Overview, Data Table

The list card displays a set of items or objects in a vertical list format. Similar to the object card, the list card is also highly customizable. For increased organization, there are a few best practices on list item usage.

Usage

Anatomy

Variations

Resources

Development: ListCard

SAP Fiori for iOS: List Card

Related Components/Patterns: Cards Overview, Object Cell

The object card is a flexible container with critical information regarding a single object. It previews the object and serves as the entry point to the full object detail page. The object card is highly customizable to accommodate various content types and use cases.

Usage

Anatomy

Variations

Adaptive Design

Resources

Development: ObjectCard

SAP Fiori for iOS: Object Card View

Related Components/Patterns: Cards Overview, Object Cell, Menus

The attachment form cell is usually part of the create or editing workflow, located at the end of the form. All the attached files should be associated with a certain business object.

Anatomy

Basic Anatomy

A. Header

The header is at the top of the attachment form cell and includes a label, a counter, and an icon or a text button.

B. Attachment Cells

The attachment cells display the attached files. Each item represents one attachment. Attachments can be displayed in a list or a multi-row grid view.

C. Footer (Optional)

The optional footer includes a “See All (n)” button, where n stands for the total number of items in the list. It should be placed below the attachment cells when the number of displayed items is set to a limited number.

D. Helper Text (Optional)

The helper text provides additional information about the selection, such as hints, requirements, etc.

Edit Mode

In edit mode, the attachment form cell consists of an attachment header and list of attached files.

Attachment Header

A. Text Label

The text label indicates the name of a section. Use “Attachments” as the default label. The label can be customized based on context. For example, in the process of creating an expense report, the attachment section can be labeled as “Receipts”.

B. Counter

The counter shows the number of attachments.

C. Mandatory Field Indicator (Optional)

If the attachment form cell is a mandatory field, it is indicated by an asterisk (*). 

D. “Add” Button

Tapping the “Add” button triggers the workflow of adding an attachment. 

Attachment List

The attachment list shows the basic information of each attached item. Each list item consists of:

A. Thumbnail

The thumbnail provides a preview image of the attached file when available; otherwise, display the icon for that file type.

B. File Name

A text string displays the file name with file type extension. The file name can wrap to two lines. If the name is longer than the allocated space, truncate it in the middle to keep the file type visible.

C. File Information (Optional)

The subheading can be used to display additional information, such as file size or description.