Object Card

Joule / Components / Object Card

Intro

Object cards serve as a preview of 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 for more detailed object content.

Don't

Don’t use object cards to place unrelated elements in them.

  • Keep object cards focused on one topic and self-contained.
  • Present object card information in a compact and easily scannable format.
  • Use a reasonable 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, status row, 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.

D. Footer (Optional)

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 Error Handling 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

Joule for Android: Object Card

Joule for Web: Joule Web UI Kit Guidelines

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