booking_card

What was booked, in one card. booking_card is the summary that follows a choice: what, when, where, plus up to eight label/value lines for the details that matter afterwards: the reference number, the person, the price.

The optional image runs to the card's own edge, so a venue or a class looks like a place rather than a row in a database.

Gait analysis and fittingNeon Kicks Amsterdam, Haarlemmerstraat 24

Wednesday 2 September, 10:00 to 10:45

Fitting room 2, ground floor

FitterMeral Doğan

BookingFIT-2291

Confirm the fitting

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 use it to offer times. Choosing is datetime_slots; this block records the outcome.

Do not use it as a payment summary either. Money with a total belongs in receipt, which renders subtotal, tax and total as a proper column.

Props

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

Prop	Type	Required	Constraints
`title`	string	Yes	1 to 120 characters.
`subtitle`	string	No	Up to 200 characters.
`when`	string	No	Up to 80 characters. Formatted by you, in the user's locale.
`where`	string	No	Up to 120 characters.
`image_url`	string	No	https only.
`lines`	array	No	Up to 8 entries.
`lines[].label`	string	Yes	Up to 60 characters.
`lines[].value`	string	Yes	Up to 120 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_13",
  "type": "booking_card",
  "fallback_text": "Fitting on 2 September at 10:00, Neon Kicks Amsterdam.",
  "props": {
    "title": "Gait analysis and fitting",
    "subtitle": "Neon Kicks Amsterdam, Haarlemmerstraat 24",
    "when": "Wednesday 2 September, 10:00 to 10:45",
    "where": "Fitting room 2, ground floor",
    "image_url": "https://cdn.example.com/store-amsterdam.jpg",
    "lines": [
      {
        "label": "Fitter",
        "value": "Meral Doğan"
      },
      {
        "label": "Booking",
        "value": "FIT-2291"
      }
    ],
    "cta": {
      "label": "Confirm the fitting",
      "action": {
        "kind": "reply",
        "text": "Confirm booking FIT-2291"
      }
    }
  }
}

Interaction

Only the CTA is interactive; the card itself is not tappable. Legal kinds are reply and 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.

If the confirmation writes to your system, register it as a write action and let the server raise a confirm_card. Do not treat the CTA as approval.

States

State	What the SDK draws
Loading	A wide image placeholder over a title bar and a detail line.
No image	The card starts at its title. Nothing is reserved for a picture that is not coming.
Image broken	The image slot holds a sunk rectangle with a broken-image glyph and the card renders normally.

Accessibility

The image is decorative and announces nothing, because the title is the very next thing in the tree and an alt repeating it makes a reader hear it twice. fallback_text should carry what, when and where in one sentence, because those three are what the user actually needs to hear back.