Card block

Displays a single item — a product, a record, an article — as a card with an image, text and up to three buttons.


Type	`card`
Available in	Messages, Modals, Home tab
Compatible block elements	Button element, Image element

Usage

At least one of hero_image, title, body or actions is required.

Fields

Field	Type	Description	Required?
`type`	String	The type of block. For a card block, `type` is always `card`.	Required
`block_id`	String	A unique identifier for the block. If not specified, one is generated. Use it to tell which block a `block_actions` payload came from. Maximum length is 255 characters. It must be unique within the message or view — a duplicate is replaced and reported as a warning.	Optional
`hero_image`	Image element	The large image at the top of the card. `image_url` is at most 3000 characters, `alt_text` at most 2000.	Optional
`icon`	Image element	A small image shown next to the title and subtitle. `image_url` is at most 3000 characters, `alt_text` at most 2000.	Optional
`title`	Text object	Title of the card, `plain_text` or `mrkdwn`. Maximum 150 characters.	Optional
`subtitle`	Text object	Subtitle of the card, `plain_text` or `mrkdwn`. Maximum 150 characters.	Optional
`body`	Text object	Content of the card, `plain_text` or `mrkdwn`. Maximum 200 characters.	Optional
`subtext`	Text object	Smaller text shown below the body, `plain_text` or `mrkdwn`. Maximum 200 characters.	Optional
`actions`	Array of Button element	Buttons shown at the bottom of the card, maximum 3. `danger` buttons sit on the left; `primary` and unstyled buttons sit on the right. Clicks reach your app as `block_actions` with the card’s `block_id`.	Optional

Examples

A product card

A product card — how it renders in Repzo Chat

{
  "blocks": [
    {
      "type": "card",
      "hero_image": {
        "type": "image",
        "image_url": "https://picsum.photos/id/180/800/450",
        "alt_text": "Laptop on a desk"
      },
      "title": {
        "type": "plain_text",
        "text": "ProBook 14 — Business laptop"
      },
      "subtitle": {
        "type": "plain_text",
        "text": "SKU LT-1400 · 32 in stock"
      },
      "body": {
        "type": "mrkdwn",
        "text": "Intel Core i7, 16 GB RAM, 512 GB SSD. *SAR 4,299* per unit."
      },
      "actions": [
        {
          "type": "button",
          "action_id": "add_to_quote",
          "text": {
            "type": "plain_text",
            "text": "Add to quote"
          },
          "style": "primary",
          "value": "LT-1400"
        },
        {
          "type": "button",
          "action_id": "view_product",
          "text": {
            "type": "plain_text",
            "text": "View"
          },
          "url": "https://example.com/products/LT-1400"
        }
      ]
    }
  ]
}

A record card with an icon

A record card with an icon — how it renders in Repzo Chat

{
  "blocks": [
    {
      "type": "card",
      "icon": {
        "type": "image",
        "image_url": "https://picsum.photos/id/1/64/64",
        "alt_text": "Account logo"
      },
      "title": {
        "type": "plain_text",
        "text": "Al Noor Trading"
      },
      "subtitle": {
        "type": "plain_text",
        "text": "Renewal due in 14 days"
      },
      "body": {
        "type": "mrkdwn",
        "text": "Annual plan, 25 seats. Last order *SAR 120,000*."
      },
      "subtext": {
        "type": "plain_text",
        "text": "Owner: Sales team East"
      },
      "actions": [
        {
          "type": "button",
          "action_id": "mark_lost",
          "text": {
            "type": "plain_text",
            "text": "Mark lost"
          },
          "style": "danger",
          "value": "acc_481"
        },
        {
          "type": "button",
          "action_id": "start_renewal",
          "text": {
            "type": "plain_text",
            "text": "Start renewal"
          },
          "style": "primary",
          "value": "acc_481"
        }
      ]
    }
  ]
}