InfoCard

Overview

InfoCards display a compact summary of an object — a title with an optional thumbnail, description, and status badge.

When to use:

  • Use InfoCards to represent a 3rd party integration (e.g. a payment provider or channel) alongside its connection status.
  • Pair the img thumbnail with a badge to convey both identity and state at a glance.

Implementation

Edit the code below to see your changes live!

<InfoCard title="Payment provider" />

Props

Prop name
Type
Default
Description
title *string

Primary text displayed by the InfoCard.

descriptionstring

Secondary text rendered below the title.

badgeBadgeProps

Renders a Badge next to the title.

imgImgProps

Renders a thumbnail to the left of the title, sized 40×40 by default. See ImgProps for usage.

Props ending with * are required

Do's and Don'ts

Do
Provide a meaningful alt value when the thumbnail carries information the title does not.
Don't
Don’t use long title or description text; keep it concise so the card stays scannable.