Intro

A card provides brief, related pieces of information and serves as an entry point, teaser, or preview of more detailed content.

SAP Fiori for Android cards

Usage

Use cards to:

Display content from various sources by using nested components such as lists, calendars, KPIs, and more.
Provide an entry point, teaser, or preview to more detailed content of a conceptual unit.
Display information in a compact and easily scannable format.

Don't

Don’t use cards to display unrelated elements on them.

Make sure that a card focuses on a single topic and maintains internal coherence.
Keep the height of a card, which is determined by its content, under the maximum limit of 520dp.
Ensure that there is a clear indication on the card when a user selects it and a web browser is opened, for example, by incorporating an icon that indicates an external page is opened.
When designing your layout, don’t use the inset grouped style (table view with rounded corners) as a substitute for the card component: the inset grouped style does not automatically transform a component into a card.

Cards should focus on one topic

Don’t place elements within a card that do not relate to the same topic

Cards should display information in a compact format

Don’t include too many UI elements within a card

Anatomy

Card Blocks

The content of a card is organized in so-called blocks.

A. Card Container

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

B. Media

A media block serves as a decorative element, for example, for content-related images.

C. 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.

D. 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.

E. 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.

Anatomy of a card

Behavior and Interaction

Interaction States

Selecting a Card

When a user presses a card, the ripple effect provides immediate feedback to indicate their selection.

When the whole card is selected, the ripple appears as an indicator

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.

Interactive item selected within a card

Interactive element selected within a card

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.

Selecting a card redirects the user to a list report with more details

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.

Selecting an element within a card redirects the user redirected to an object details page with more details

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.

Empty state if the entire card content fails to load

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

Empty state if only the card body fails to load

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 reflects the loaded card size.

Skeleton loading on a small, medium, and large card

Variations

Card Style

Card styles are designed to provide consistent legibility and functionality, allowing selection based on which best aligns with the screen design of the app.

information

For accessibility reasons, avoid using a tonal button on a filled card; use a contained or text button instead.

A. Elevated Card

Elevated cards incorporate a drop shadow, which creates more distinction from the background than filled cards do, but less separation than outlined cards.

B. Outline Card

Outlined cards include a visible border surrounding the container, which can offer more emphasis compared to the other styles.

C. Filled Card

Filled cards offer a gentle separation from the background, emphasizing less than elevated or outlined cards.

Card styles: elevated (left), outline (middle) and filled (right)

Card Orientation

There are two card orientations that offer greater flexibility in aligning content blocks. These orientations make it easier to determine which format best suits the card content and the screen layout.

Vertical

In vertical orientation, the content blocks stack atop one another, resulting in a card with increased height. This orientation is recommended in a carousel layout.

Vertical Card Orientation Examples

Horizontal

In horizontal orientation, the media block is placed either to the left or right of the vertically stacked content blocks, creating a card with a wider dimension. This orientation is recommended in a list layout.

Horizontal Card Orientation Examples

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.

Cards in Panes

Panes can have different surface colors. Designing cards for each breakpoint ensures the card style works across all layouts. Keeping the same card style throughout ensures consistency. The support pane retains the container color at all breakpoints. In contrast, within the split pane, the detail pane can have a lighter container color, but adopts the surface color in compact mode.

Cards displayed in panes: expanded (left) and compact (right)

Best Practices

The card component can be adjusted to different use cases by leveraging the flexibility of the card media, header, body, and footer.

Block Width Configuration

To create a balanced layout in a horizontal card, it's recommended to set block widths using assigned weights. This method distributes space among the card blocks, determining how much space each block should have in relation to the others.

While weights generally guide space distribution, the media block can also be configured with an aspect ratio if specified in the media's image settings. When an aspect ratio is set, it takes priority over weights to ensure images display correctly without being stretched, squished, or distorted. The rest of the card's width is then allocated based on the weights assigned to each of the other sections.