# 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](https://workstation.repzo.com/docs/developers/block-kit/elements/button-element), [Image element](https://workstation.repzo.com/docs/developers/block-kit/elements/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](https://workstation.repzo.com/docs/developers/block-kit/elements/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](https://workstation.repzo.com/docs/developers/block-kit/elements/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](https://workstation.repzo.com/docs/developers/block-kit/objects/text-object) | Title of the card, `plain_text` or `mrkdwn`. Maximum 150 characters. | Optional |
| `subtitle` | [Text object](https://workstation.repzo.com/docs/developers/block-kit/objects/text-object) | Subtitle of the card, `plain_text` or `mrkdwn`. Maximum 150 characters. | Optional |
| `body` | [Text object](https://workstation.repzo.com/docs/developers/block-kit/objects/text-object) | Content of the card, `plain_text` or `mrkdwn`. Maximum 200 characters. | Optional |
| `subtext` | [Text object](https://workstation.repzo.com/docs/developers/block-kit/objects/text-object) | Smaller text shown below the body, `plain_text` or `mrkdwn`. Maximum 200 characters. | Optional |
| `actions` | Array of [Button element](https://workstation.repzo.com/docs/developers/block-kit/elements/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 |

> **How Repzo Chat differs from Slack**
>
> - `slack_icon` isn't supported — pass an image in `icon` instead.
> - `title`, `subtitle`, `body` and `subtext` may also be plain strings.

## Examples

### A product card

```json
{
  "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

```json
{
  "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"
        }
      ]
    }
  ]
}
```

## Related

- [Blocks](https://workstation.repzo.com/docs/developers/block-kit/blocks)
- [Block Kit overview](https://workstation.repzo.com/docs/developers/block-kit)