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.
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.
| Prop | Type | Required | Constraints |
|---|---|---|---|
icon | string | No | Up to 40 characters. One of a closed set of 28 names, listed below. An unknown name draws no glyph. |
title | string | Yes | 1 to 120 characters. |
body | string | No | Up to 600 characters. |
cta | object | No | None |
cta.label | string | Yes | 1 to 60 characters. |
cta.action | action | Yes | { 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
| State | What the SDK draws |
|---|---|
| Loading | A plate with a glyph placeholder, a title bar and two body lines, in the card's own proportions. |
| No icon | The title moves to the left edge. Nothing is reserved for a glyph that is not coming. |
| Unknown icon | The 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