Samples and Templates

These samples are just a teaser of the type of cards you can create. Go ahead and tweak them to make any scenario possible!

Important note about accessibility: In version 1.3 of the schema we introduced a label property on Inputs to improve accessibility. If the Host app you are targetting supports v1.3 you should use label intead of a TextBlock as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.

Choose sample:

Templating enables the separation of data from the layout in an Adaptive Card. It helps design a card once, and then populate it with real data at runtime. Note: The binding syntax changed in May 2020. Get started with templating

Flight itinerary sample

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,
			"wrap": true
		},
		{
			"type": "TextBlock",
			"text": "Sarah Hum",
			"separator": true,
			"wrap": true
		},
		{
			"type": "TextBlock",
			"text": "Jeremy Goldberg",
			"spacing": "none",
			"wrap": true
		},
		{
			"type": "TextBlock",
			"text": "Evan Litvak",
			"spacing": "none",
			"wrap": true
		},
		{
			"type": "TextBlock",
			"text": "2 Stops",
			"weight": "bolder",
			"spacing": "medium",
			"wrap": true
		},
		{
			"type": "TextBlock",
			"text": "Tue, May 30, 2017 12:25 PM",
			"weight": "bolder",
			"spacing": "none",
			"wrap": true
		},
		{
			"type": "ColumnSet",
			"separator": true,
			"columns": [
				{
					"type": "Column",
					"width": 1,
					"items": [
						{
							"type": "TextBlock",
							"text": "San Francisco",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"size": "extraLarge",
							"color": "accent",
							"text": "SFO",
							"spacing": "none",
							"wrap": true
						}
					]
				},
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "TextBlock",
							"text": " ",
							"wrap": true
						},
						{
							"type": "Image",
							"url": "https://adaptivecards.io/content/airplane.png",
							"size": "small",
							"spacing": "none",
							"altText": "Flight to"
						}
					]
				},
				{
					"type": "Column",
					"width": 1,
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "right",
							"text": "Amsterdam",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"horizontalAlignment": "right",
							"size": "extraLarge",
							"color": "accent",
							"text": "AMS",
							"spacing": "none",
							"wrap": true
						}
					]
				}
			]
		},
		{
			"type": "TextBlock",
			"text": "Non-Stop",
			"weight": "bolder",
			"spacing": "medium",
			"wrap": true
		},
		{
			"type": "TextBlock",
			"text": "Fri, Jun 2, 2017 1:55 PM",
			"weight": "bolder",
			"spacing": "none",
			"wrap": true
		},
		{
			"type": "ColumnSet",
			"separator": true,
			"columns": [
				{
					"type": "Column",
					"width": 1,
					"items": [
						{
							"type": "TextBlock",
							"text": "Amsterdam",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"size": "extraLarge",
							"color": "accent",
							"text": "AMS",
							"spacing": "none",
							"wrap": true
						}
					]
				},
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "TextBlock",
							"text": " ",
							"wrap": true
						},
						{
							"type": "Image",
							"url": "https://adaptivecards.io/content/airplane.png",
							"size": "small",
							"spacing": "none",
							"altText": "Flight to"
						}
					]
				},
				{
					"type": "Column",
					"width": 1,
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "right",
							"text": "San Francisco",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"horizontalAlignment": "right",
							"size": "extraLarge",
							"color": "accent",
							"text": "SFO",
							"spacing": "none",
							"wrap": true
						}
					]
				}
			]
		},
		{
			"type": "ColumnSet",
			"spacing": "medium",
			"columns": [
				{
					"type": "Column",
					"width": "1",
					"items": [
						{
							"type": "TextBlock",
							"text": "Total",
							"size": "medium",
							"isSubtle": true,
							"wrap": true
						}
					]
				},
				{
					"type": "Column",
					"width": 1,
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "right",
							"text": "$4,032.54",
							"size": "medium",
							"weight": "bolder",
							"wrap": true
						}
					]
				}
			]
		}
	]
}
Data JSON
{
  "Segments": [
    {
      "Id": 1,
      "OriginStation": 11235,
      "DestinationStation": 13554,
      "DepartureDateTime": "2017-05-30T19:25:00Z",
      "ArrivalDateTime": "2017-05-30T20:55:00Z",
      "Carrier": 881,
      "OperatingCarrier": 881,
      "Duration": 90,
      "FlightNumber": "1463",
      "JourneyMode": "Flight",
      "Directionality": "Outbound"
    },
    {
      "Id": 2,
      "OriginStation": 13554,
      "DestinationStation": 11235,
      "DepartureDateTime": "2017-06-02T19:25:00Z",
      "ArrivalDateTime": "2017-06-02T20:55:00Z",
      "Carrier": 881,
      "OperatingCarrier": 881,
      "Duration": 90,
      "FlightNumber": "1463",
      "JourneyMode": "Flight",
      "Directionality": "Inbound"
    }
  ],
  "BookingOptions": [
    {
      "BookingItems": [
        {
          "AgentID": 4499211,
          "Status": "Current",
          "Price": 4032.54,
          "Deeplink": "https://partners.api.skyscanner.net/apiservices/deeplink/v2?_cje=jzj5DawL5[...]",
          "SegmentIds": [
            1,
            2
          ]
        }
      ]
    }
  ],
    "Places": [
    {
      "Id": 13554,
      "ParentId": 4698,
      "Code": "SFO",
      "Type": "Airport",
      "Name": "San Francisco"
    },
    {
      "Id": 13558,
      "ParentId": 5796,
      "Code": "AMS",
      "Type": "Airport",
      "Name": "Amsterdam"
    }
  ],
  "Carriers": [
    {
      "Id": 881,
      "Code": "BA",
      "Name": "British Airways",
      "ImageUrl": "https://s1.apideeplink.com/images/airlines/BA.png"
    }
  ],
  "Query": {
    "Country": "GB",
    "Currency": "GBP",
    "Locale": "en-gb",
    "Adults": 3,
    "Children": 0,
    "Infants": 0,
    "OriginPlace": "2343",
    "DestinationPlace": "13554",
    "OutboundDate": "2017-05-30",
    "InboundDate": "2017-06-02",
    "LocationSchema": "Default",
    "CabinClass": "Economy",
    "GroupPricing": false
  }
 }
Template 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",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Sarah Hum",
            "separator": true,
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Jeremy Goldberg",
            "spacing": "None",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Evan Litvak",
            "spacing": "None",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "2 Stops",
            "weight": "Bolder",
            "spacing": "Medium",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "{{DATE(${string(Segments[0].DepartureDateTime)}, SHORT)}} {{TIME(${string(Segments[0].DepartureDateTime)})}}",
            "weight": "Bolder",
            "spacing": "None",
            "wrap": true
        },
        {
            "type": "ColumnSet",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "$when": "${Segments[0].OriginStation == 11235}",
                            "text": "${Places[0].Name}",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "$when": "${Segments[0].OriginStation == 13554}",
                            "text": "${Places[1].Name}",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "size": "ExtraLarge",
                            "color": "Accent",
                            "$when": "${Segments[0].OriginStation == 11235}",
                            "text": "${Places[0].Code}",
                            "spacing": "None",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "size": "ExtraLarge",
                            "color": "Accent",
                            "$when": "${Segments[0].OriginStation == 13554}",
                            "text": "${Places[1].Code}",
                            "spacing": "None",
                            "wrap": true
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": " ",
                            "wrap": true
                        },
                        {
                            "type": "Image",
                            "url": "https://adaptivecards.io/content/airplane.png",
                            "size": "Small",
                            "spacing": "None"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "$when": "${Segments[0].DestinationStation == 11235}",
                            "text": "${Places[0].Name}",
                            "horizontalAlignment": "Right",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "$when": "${Segments[0].DestinationStation == 13554}",
                            "text": "${Places[1].Name}",
                            "horizontalAlignment": "Right",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "size": "ExtraLarge",
                            "color": "Accent",
                            "$when": "${Segments[0].DestinationStation == 11235}",
                            "text": "${Places[0].Code}",
                            "horizontalAlignment": "Right",
                            "spacing": "None",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "size": "ExtraLarge",
                            "color": "Accent",
                            "$when": "${Segments[0].DestinationStation == 13554}",
                            "text": "${Places[1].Code}",
                            "horizontalAlignment": "Right",
                            "spacing": "None",
                            "wrap": true
                        }
                    ]
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "Non-Stop",
            "weight": "Bolder",
            "spacing": "Medium",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "{{DATE(${string(Segments[1].ArrivalDateTime)}, SHORT)}} {{TIME(${string(Segments[1].ArrivalDateTime)})}}",
            "weight": "Bolder",
            "spacing": "None",
            "wrap": true
        },
        {
            "type": "ColumnSet",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "$when": "${Segments[1].OriginStation == 11235}",
                            "text": "${Places[0].Name}",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "$when": "${Segments[1].OriginStation == 13554}",
                            "text": "${Places[1].Name}",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "size": "ExtraLarge",
                            "color": "Accent",
                            "$when": "${Segments[1].OriginStation == 11235}",
                            "text": "${Places[0].Code}",
                            "spacing": "None",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "size": "ExtraLarge",
                            "color": "Accent",
                            "$when": "${Segments[1].OriginStation == 13554}",
                            "text": "${Places[1].Code}",
                            "spacing": "None",
                            "wrap": true
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": " ",
                            "wrap": true
                        },
                        {
                            "type": "Image",
                            "url": "https://adaptivecards.io/content/airplane.png",
                            "size": "Small",
                            "spacing": "None"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "$when": "${Segments[1].DestinationStation == 11235}",
                            "text": "${Places[0].Name}",
                            "horizontalAlignment": "Right",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "$when": "${Segments[1].DestinationStation == 13554}",
                            "text": "${Places[1].Name}",
                            "horizontalAlignment": "Right",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "size": "ExtraLarge",
                            "color": "Accent",
                            "$when": "${Segments[1].DestinationStation == 11235}",
                            "text": "${Places[0].Code}",
                            "horizontalAlignment": "Right",
                            "spacing": "None",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "size": "ExtraLarge",
                            "color": "Accent",
                            "$when": "${Segments[1].DestinationStation == 13554}",
                            "text": "${Places[1].Code}",
                            "horizontalAlignment": "Right",
                            "spacing": "None",
                            "wrap": true
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "Medium",
            "columns": [
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Total",
                            "size": "Medium",
                            "isSubtle": true,
                            "wrap": true
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "horizontalAlignment": "Right",
                            "text": "$${formatNumber(BookingOptions[0].BookingItems[0].Price, 2)}",
                            "size": "Medium",
                            "weight": "Bolder",
                            "wrap": true
                        }
                    ]
                }
            ]
        }
    ]
}
Adaptive Card