Object Card

Joule / Components / Object Card

Intro

Object cards serve as a preview for an object. By pressing on the card, users can navigate to a dedicated page with more detailed information.

Object card in compact Joule panel (left) and regular Joule panel (right)

Usage

Do

  • Use object cards as a teaser or preview to more detailed object content.
  • Keep object cards focused on one topic and self-contained.
  • Present object card information in a compact and easily scannable format.

Don't

  • Don’t place unrelated elements in one object card.
  • Don’t include an excessive number of UI elements within one object card.

Anatomy

A. Object Card Container

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

B. Header

The header introduces the object card. Its properties are flexible to suit various use cases. These properties include a title and optionally an avatar, subtitle, description, and counter.

C. Body (Optional)

The body contains the main content of the object card. Its properties are flexible to suit various use cases. These properties include a title and optionally a media header, avatar, subtitle, description, and counter.

The footer includes up to three action buttons related to the object.

Object card anatomy

Behavior and Interaction

Detail View (Optional)

When a card is selected and detail view is enabled, the Joule panel will transition to a detail view of the object card. The user may return to the Joule conversation by selecting the “Back” button within the Detail View page.

Interaction of opening the detail view upon selecting the object card, then returning to the Joule conversation

Error Handling

When there is no relevant card content or data to display, it is important to show the proper error handling type. Refer to the [Joule Error Handling Guidelines] for more details.

Adaptive Design

Max Width

Object cards fill the container width but are limited to a maximum size to ensure readability across devices.

Maximum width object cards in compact Joule panel (left) and expanded Joule panel (right)

Resources

SAP for Android: Object Card

SAP Fiori for Web: Joule Web UI Kit Guidelines

Related Components/Patterns: Cards Overview, Detail View, Outbound Navigation, Error Handling