ReferenceComponents

info_card

Icon, title, body and one optional action.

The workhorse. info_card is one fact with a name on it: a policy, a status, a piece of guidance, optionally with the single thing to do about it.

Reach for it when the answer is one idea rather than a list of them, and when that idea deserves an enclosure rather than sitting in prose.

Free returns within 30 daysUnworn shoes in the original box can go back at any pickup point.
Start a return

Re-rendered in the browser from the SDK’s own scales. Not a screenshot.

Rendered natively by the Flutter SDK and the Web SDK, both since 0.1.0.

When not to use it

Do not stack three of them. Three info cards in a row is an item_list that has been taken apart.

Do not use it for a transient notice about state ("promo applied", "stock is low"), which is status_banner: the banner interrupts, the card records. And a card that ends up with two or three actions is a plan_comparison or a quick_replies block, not a card.

Props

Every block also carries type and a required fallback_text of 1 to 300 characters.

PropTypeRequiredConstraints
iconstringNoUp to 40 characters. One of a closed set of 28 names, listed below. An unknown name draws no glyph.
titlestringYes1 to 120 characters.
bodystringNoUp to 600 characters.
ctaobjectNoNone
cta.labelstringYes1 to 60 characters.
cta.actionactionYes{ kind: "reply", text } or { kind: "open_url", url }. See Actions.

On the wire

{
  "id": "blk_02",
  "type": "info_card",
  "fallback_text": "Free returns within 30 days.",
  "props": {
    "icon": "truck",
    "title": "Free returns within 30 days",
    "body": "Unworn shoes in the original box can go back at any pickup point. Refunds land 3 to 5 days after the parcel is scanned.",
    "cta": {
      "label": "Start a return",
      "action": {
        "kind": "reply",
        "text": "Start a return for order 1042"
      }
    }
  }
}

Interaction

The CTA fires its action: reply or open_url. Both execute: open_url opens the page in an in-app browser, or goes to your RendelConfig.onOpenUrl when you set one. https only. The card itself is not tappable, so a card without a cta announces nothing to a screen reader that it cannot do.

States

StateWhat the SDK draws
LoadingA plate with a glyph placeholder, a title bar and two body lines, in the card's own proportions.
No iconThe title moves to the left edge. Nothing is reserved for a glyph that is not coming.
Unknown iconThe glyph is omitted and the card renders normally. It never falls back to a generic square.

Accessibility

fallback_text should be the title, or the title and the first clause of the body. The icon is decorative and is not announced; the CTA announces its own label.

Icon names

icon accepts these and nothing else. The set is closed on purpose: an open one means the model guesses a name and the card silently loses its glyph.

info · check · warning · error · order · package · truck · calendar · clock · card
wallet · tag · gift · star · heart · user · settings · search · location · phone
mail · lock · refresh · download · link · bag · ticket · chart