key_points
A few points, each an icon, a title and a line: the reasons behind a pick.
The reasons, laid out to be scanned. key_points is how an answer page says why: why this shoe, what makes this plan work, what to watch for. Each point is an icon, a title of a few words, and an optional line under it.
It is also the decision guide at the end of a comparison: the title is the need ("Most comfortable"), the line is the pick ("Aero Glide 2").
- Size 43 in stockReady to ship from Rotterdam today.
- Free deliveryAt your door on Thursday, no minimum.
- 30-day returnsEven after a run or two.
Re-rendered in the browser from the SDK’s own scales. Not a screenshot.
Rendered natively by the Flutter SDK since 0.34.0 and the web SDK since 0.11.0. A build that does not declare it is never offered it.
When not to use it
Not for facts about one thing, which are key_value: a date, a size and a price are a detail sheet, not reasons. Not for steps in order, which are order_tracker or a numbered text.
Three or four points is the shape. Eight is the limit, not the target: past four, the reader stops scanning and starts reading.
Props
Every block also carries type and a required fallback_text of 1 to 300 characters.
| Prop | Type | Required | Constraints |
|---|---|---|---|
items | array | Yes | 1 to 8 entries. |
items[].icon | string | No | Up to 40 characters. One of the info_card icon names. An unknown name draws no icon and keeps the column. |
items[].title | string | Yes | 1 to 80 characters. |
items[].body | string | No | Up to 240 characters. |
On the wire
{
"id": "blk_31",
"type": "key_points",
"fallback_text": "Size 43 is in stock, delivery is free, and returns are open for 30 days.",
"props": {
"items": [
{ "icon": "check", "title": "Size 43 in stock", "body": "Ready to ship from Rotterdam today." },
{ "icon": "truck", "title": "Free delivery", "body": "At your door on Thursday, no minimum." },
{ "icon": "clock", "title": "30-day returns", "body": "Even after a run or two." }
]
}
}Interaction
None. The points are a readout.
Accessibility
Each point is announced as its title followed by its line. The icon is decoration and is not announced; the title says what it means.