The Adaptive Card is one of the most configurable and flexible cards you can use. These are platform-agnostic snippets written in JSON which support the use of speech, buttons, text, images, input controls, custom backgrounds, and more.

To create an adaptive card, you need to create a Send a Response action in the designer canvas and supply the relevant markup.  It's important to note that this markup must be added as an Attachment response and not as a Text response.

1. Add a Send a Response action.
2. Under Bot responses in the edit pane, click the plus sign, then click Attachments.
3. Click Add new attachment, then choose Create from template > Adaptive card from the dialog.
4. Click the pop-out icon in the upper right of the editor to launch the full-screen Adaptive Card Designer.

The Adaptive Card Designer permits you to design your adaptive card visually without having to leave the Conversation Designer/UI Builder. When you have completed designing your card, close the editor, and the JSON snippet will be automatically inserted in the appropriate place in your Send a Response action.

An Example Adaptive Card

One example of the mark-up to create an Adaptive Card is as follows:

- ${json({
  "$schema": "<http://adaptivecards.io/schemas/adaptive-card.json>",
  "version": "1.0",
  "type": "AdaptiveCard",
  "speak": "Your flight is confirmed for you and 3 other passengers from San Francisco to Amsterdam on Friday, October 10 8:30 AM",
  "body": [
    {
      "type": "TextBlock",
      "text": "Passengers",
      "weight": "bolder",
      "isSubtle": false
    },
    {
      "type": "TextBlock",
      "text": "James",
      "spacing": "none"
    },
    {
      "type": "TextBlock",
      "text": "2 Stops",
      "weight": "bolder",
      "spacing": "medium"
    },
    {
      "type": "TextBlock",
      "text": "Fri, October 10 21:45",
      "weight": "bolder",
      "spacing": "none"
    },
    {
      "type": "ColumnSet",
      "separator": true,
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "text": "BWI Marshall",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "size": "extraLarge",
              "color": "accent",
              "text": "BWI",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": " "
            },
            {
              "type": "Image",
              "url": "<http://adaptivecards.io/content/airplane.png>",
              "size": "small",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "text": "Malaga",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "size": "extraLarge",
              "color": "accent",
              "text": "AGP",
              "spacing": "none"
            }
          ]
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Non-Stop",
      "weight": "bolder",
      "spacing": "medium"
    },
    {
      "type": "TextBlock",
      "text": "Fri, October 18 9:50 PM",
      "weight": "bolder",
      "spacing": "none"
    },
    {
      "type": "ColumnSet",
      "separator": true,
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "text": "Malaga",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "size": "extraLarge",
              "color": "accent",
              "text": "AGP",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": " "
            },
            {
              "type": "Image",
              "url": "<http://adaptivecards.io/content/airplane.png>",
              "size": "small",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "text": "BWI Marshall",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "size": "extraLarge",
              "color": "accent",
              "text": "BWI",
              "spacing": "none"
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "spacing": "medium",
      "columns": [
        {
          "type": "Column",
          "width": "1",
          "items": [
            {
              "type": "TextBlock",
              "text": "Total",
              "size": "medium",
              "isSubtle": true
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "text": "$4,032.54",
              "size": "medium",
              "weight": "bolder"
            }
          ]
        }
      ]
    }
  ]
})}

The JSON above renders the following Adaptive Card: