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 expanded Joule panel (right)

Usage

Do

Use object cards as a teaser or preview to more detailed object content.

Don't

Don’t use several object cards to display multiple related objects. Instead, use a carousel or list card.

  • Keep object cards focused on one topic and self-contained.
  • Present object card information in a compact and easily scannable format.
  • Don’t place unrelated elements in one object card.
  • Don’t include an excessive number of UI elements within one object card.

Anatomy

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

B. Body (Optional)

The body contains the main content of the object card. Its properties are flexible to suit various use cases. These properties include an optional section title or key value pairs.

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

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 card in compact Joule panel (left) and expanded Joule panel (right)

Resources

Joule for iOS: Object Card

Joule for Web: Joule Web UI Kit Guidelines

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