Intro
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.
SAP Fiori for iOS cards
Usage
Do
Use cards to display content from various sources by using nested components such as lists, calendars, KPIs, and more.
Don't
Don’t use cards to display unrelated elements on them.
- 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 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
The height of a card is determined by its content. However, we recommend that a card should not be higher than 520pt.
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 can be added as a decorative element, like an image that fits the card's context.
C. Media
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.
Schematic card anatomy (left) and anatomy of an example card (right)
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.
A. 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
B. 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
Behavior and Interaction
Interaction States
Selecting a Card
When a user selects a card, the background color of the card changes, serving as a clear and immediate feedback to indicate their selection.
When the whole card is selected, the background color of the card changes
Selecting an Interactive Element
When a specific element within the card, such as an object cell, is designed to be interactive, it goes through a unique background color transition, providing a distinct visual indicator of the selection.
If the data still needs to load after selecting the element, a loading indicator appears.
When an interactive element is selected within the card, only the background color of this element changes
Navigation
Selecting a Card
When a card is selected, it prompts the user to navigate to a designated page that provides more details, such as a list report page or an object details page.
By selecting the card, the user is redirected to a list report with more details
Selecting an Interactive Element
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.
By selecting an element within the card, the user is redirected to an object details page with more details
Empty States
Entire Card
When there is no relevant content or data to display, it is important to include an empty state indicator within a card.
Empty state if the entire card content fails to load
Element within a Card
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 used on a card when the data that fills the card still needs to be loaded. There are three skeleton loading sizes for cards. This approach allows you to select a card size that approximately reflects the loaded card size.
For more information, refer to Skeleton Loading.
Skeleton loading on a small, medium, and large card
Adaptive Design
The card system ensures that cards adjust seamlessly to different screen sizes and orientations. For compact size classes (iPhone), 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 regular size classes (iPad), 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.
Best Practices
The card component can be adjusted to several different use cases by leveraging the flexibility of the card header, body, and footer.
The flexible card container allows a variety of cards to be created for any use case
Resources
Development: UIKit FUICardView, SwiftUI Card
SAP Fiori for Android: Cards Overview
SAP Fiori for Web: Card (SAPUI5), Card (Web Component)
Related Components/Patterns: Card Header, Card Body, Card Footer