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 targeting supports v1.3 you should use label instead 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 update table sample

JSON
{ 
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "Table",
            "columns": [
                {
                    "width": 1
                },
                {
                    "width": 1
                },
                {
                    "width": 1
                }
            ],
            "rows": [
                {
                    "type": "TableRow",
                    "cells": [
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "Image",
                                    "size": "Small",
                                    "url": "https://adaptivecards.io/content/airplane.png",
                                    "altText": "Airplane"
                                }
                            ]
                        },
                        {
                            "type": "TableCell"
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Flight Status",
                                    "horizontalAlignment": "Right",
                                    "isSubtle": true,
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "DELAYED",
                                    "horizontalAlignment": "Right",
                                    "spacing": "None",
                                    "size": "Large",
                                    "color": "Attention",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "TableRow",
                    "cells": [
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Passengers",
                                    "isSubtle": true,
                                    "weight": "Bolder",
                                    "wrap": true,
                                    "spacing": "None"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Sarah Hum",
                                    "spacing": "Small",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Jeremy Goldberg",
                                    "spacing": "Small",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Evan Litvak",
                                    "spacing": "Small",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "TableCell"
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Seat",
                                    "horizontalAlignment": "Right",
                                    "isSubtle": true,
                                    "weight": "Bolder",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "14A",
                                    "horizontalAlignment": "Right",
                                    "spacing": "Small",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "14B",
                                    "horizontalAlignment": "Right",
                                    "spacing": "Small",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "14C",
                                    "horizontalAlignment": "Right",
                                    "spacing": "Small",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "TableRow",
                    "cells": [
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Flight",
                                    "isSubtle": true,
                                    "weight": "Bolder",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "KL605",
                                    "spacing": "Small",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Departs",
                                    "isSubtle": true,
                                    "horizontalAlignment": "Center",
                                    "weight": "Bolder",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "2:20 AM",
                                    "color": "Attention",
                                    "weight": "Bolder",
                                    "horizontalAlignment": "Center",
                                    "spacing": "Small",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Arrives",
                                    "isSubtle": true,
                                    "horizontalAlignment": "Right",
                                    "weight": "Bolder",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "8:20 PM",
                                    "color": "Attention",
                                    "horizontalAlignment": "Right",
                                    "weight": "Bolder",
                                    "spacing": "Small",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "TableRow",
                    "cells": [
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Amsterdam Airport",
                                    "isSubtle": true,
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "AMS",
                                    "size": "ExtraLarge",
                                    "color": "Accent",
                                    "spacing": "None",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "Image",
                                    "url": "https://adaptivecards.io/content/airplane.png",
                                    "altText": "Airplane",
                                    "horizontalAlignment": "Center",
                                    "size": "Small"
                                }
                            ],
                            "verticalContentAlignment": "Center"
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "San Francisco Airport",
                                    "isSubtle": true,
                                    "horizontalAlignment": "Right",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "SFO",
                                    "horizontalAlignment": "Right",
                                    "size": "ExtraLarge",
                                    "color": "Accent",
                                    "spacing": "None",
                                    "wrap": true
                                }
                            ]
                        }
                    ],
                    "spacing": "None"
                }
            ],
            "showGridLines": false
        }
    ]
}
Data JSON
{
	"@context": "http://schema.org",
	"@type": "FlightReservation",
	"reservationId": "RXJ34P",
	"reservationStatus": "http://schema.org/ReservationConfirmed",
	"passengerPriorityStatus": "Fast Track",
	"passengerSequenceNumber": "ABC123",
	"securityScreening": "TSA PreCheck",
	"underName": {
	  "@type": "Person",
	  "name": "Sarah Hum"
	},
	"reservationFor": {
	  "@type": "Flight",
	  "flightNumber": "KL605",
	  "provider": {
		"@type": "Airline",
		"name": "KLM",
		"iataCode": "KL",
		"boardingPolicy": "http://schema.org/ZoneBoardingPolicy"
	  },
	  "seller": {
		"@type": "Airline",
		"name": "KLM",
		"iataCode": "KL"
	  },
	  "departureAirport": {
		"@type": "Airport",
		"name": "Amsterdam Airport",
		"iataCode": "AMS"
	  },
	  "departureTime": "2017-03-04T09:20:00-01:00",
	  "arrivalAirport": {
		"@type": "Airport",
		"name": "San Francisco Airport",
		"iataCode": "SFO"
	  },
	  "arrivalTime": "2017-03-05T08:20:00+04:00"
	}
  }
Template JSON
{ 
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "Table",
            "columns": [
                {
                    "width": 1
                },
                {
                    "width": 1
                },
                {
                    "width": 1
                }
            ],
            "rows": [
                {
                    "type": "TableRow",
                    "cells": [
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "Image",
                                    "size": "Small",
                                    "url": "https://adaptivecards.io/content/airplane.png",
                                    "altText": "Airplane"
                                }
                            ]
                        },
                        {
                            "type": "TableCell"
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Flight Status",
                                    "horizontalAlignment": "Right",
                                    "isSubtle": true,
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "DELAYED",
                                    "horizontalAlignment": "Right",
                                    "spacing": "None",
                                    "size": "Large",
                                    "color": "Attention",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "TableRow",
                    "cells": [
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Passengers",
                                    "isSubtle": true,
                                    "weight": "Bolder",
                                    "wrap": true,
                                    "spacing": "None"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "${underName.name}",
                                    "spacing": "Small",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Jeremy Goldberg",
                                    "spacing": "Small",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Evan Litvak",
                                    "spacing": "Small",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "TableCell"
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Seat",
                                    "horizontalAlignment": "Right",
                                    "isSubtle": true,
                                    "weight": "Bolder",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "14A",
                                    "horizontalAlignment": "Right",
                                    "spacing": "Small",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "14B",
                                    "horizontalAlignment": "Right",
                                    "spacing": "Small",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "14C",
                                    "horizontalAlignment": "Right",
                                    "spacing": "Small",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "TableRow",
                    "cells": [
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Flight",
                                    "isSubtle": true,
                                    "weight": "Bolder",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "${reservationFor.flightNumber}",
                                    "spacing": "Small",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Departs",
                                    "isSubtle": true,
                                    "horizontalAlignment": "Center",
                                    "weight": "Bolder",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "{{TIME(${string(reservationFor.departureTime)})}}",
                                    "color": "Attention",
                                    "weight": "Bolder",
                                    "horizontalAlignment": "Center",
                                    "spacing": "Small",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Arrives",
                                    "isSubtle": true,
                                    "horizontalAlignment": "Right",
                                    "weight": "Bolder",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "{{TIME(${string(reservationFor.arrivalTime)})}}",
                                    "color": "Attention",
                                    "horizontalAlignment": "Right",
                                    "weight": "Bolder",
                                    "spacing": "Small",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "TableRow",
                    "cells": [
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "${reservationFor.departureAirport.name}",
                                    "isSubtle": true,
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "${reservationFor.departureAirport.iataCode}",
                                    "size": "ExtraLarge",
                                    "color": "Accent",
                                    "spacing": "None",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "Image",
                                    "url": "https://adaptivecards.io/content/airplane.png",
                                    "altText": "Airplane",
                                    "horizontalAlignment": "Center",
                                    "size": "Small"
                                }
                            ],
                            "verticalContentAlignment": "Center"
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "${reservationFor.arrivalAirport.name}",
                                    "isSubtle": true,
                                    "horizontalAlignment": "Right",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "${reservationFor.arrivalAirport.iataCode}",
                                    "horizontalAlignment": "Right",
                                    "size": "ExtraLarge",
                                    "color": "Accent",
                                    "spacing": "None",
                                    "wrap": true
                                }
                            ]
                        }
                    ],
                    "spacing": "None"
                }
            ],
            "showGridLines": false
        }
    ]
}
Adaptive Card