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:

Use Adaptive Card Templating Updated May 2020

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

Order delivery sample

JSON

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": 2,
					"items": [
						{
							"type": "TextBlock",
							"text": "Malt & Vine",
							"weight": "bolder",
							"size": "extraLarge",
							"spacing": "none",
							"wrap": true,
							"style": "heading"
						},
						{
							"type": "TextBlock",
							"text": "Redmond, WA",
							"spacing": "none",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "4.5 stars (176 reviews) · mid-priced",
							"isSubtle": true,
							"spacing": "none",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "**Blaire S.** said \"Great concept and a wide selection of beers both on tap and bottled! Smaller wine selection than I wanted, but the variety of beers certainly made up for that. Although I didn't order anything, my boyfriend got a beer and he loved it. Their prices are fair too. \n\nThe concept is really awesome. It's a bar/store that you can bring outside food into. The place was pretty packed tonight. I wish we had stayed for more than one drink. I would have loved to sample everything!\"",
							"size": "small",
							"wrap": true,
							"maxLines": 3
						}
					]
				},
				{
					"type": "Column",
					"width": 1,
					"items": [
						{
							"type": "Image",
							"url": "https://picsum.photos/300?image=882",
							"size": "auto",
							"altText": "Seated guest drinking a cup of coffee"
						}
					]
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.Submit",
			"title": "Pickup",
			"tooltip": "Schedule order for pickup"
		},
		{
			"type": "Action.Submit",
			"title": "Delivery",
			"isEnabled": false,
			"tooltip": "Your location is too far for delivery"
		}
	]
}

Data JSON

{
	"name": "Malt \u0026 Vine",
	"address": {
		"addressLocality": "Redmond",
		"addressRegion": "WA",
		"streetAddress": "16851 Redmond Way",
		"postalCode": "98052",
		"addressCountry": "US"
	},
	"review": [
		{
			"reviewRating": {
				"ratingValue": 4
			},
			"datePublished": "2014-11-28",
			"description": "Great concept and a wide selection of beers both on tap and bottled! Smaller wine selection than I wanted, but the variety of beers certainly made up for that. Although I didn't order anything, my boyfriend got a beer and he loved it. Their prices are fair too. \n\nThe concept is really awesome. It's a bar/store that you can bring outside food into. The place was pretty packed tonight. I wish we had stayed for more than one drink. I would have loved to sample everything!",
			"author": "Blaire S."
		}
	]
}

Template JSON

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": 2,
					"items": [
						{
							"type": "TextBlock",
							"text": "${name}",
							"weight": "bolder",
							"size": "extraLarge",
							"spacing": "none",
							"wrap": true,
							"style": "heading"
						},
						{
							"type": "TextBlock",
							"text": "${address.addressLocality}, ${address.addressRegion}",
							"spacing": "none",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "4.5 stars (176 reviews) · mid-priced",
							"isSubtle": true,
							"spacing": "none",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "**${review[0].author}** said \"${review[0].description}\"",
							"size": "small",
							"wrap": true,
							"maxLines": 3
						}
					]
				},
				{
					"type": "Column",
					"width": 1,
					"items": [
						{
							"type": "Image",
							"url": "https://picsum.photos/300?image=882",
							"size": "auto",
							"altText": "Seated guest drinking a cup of coffee"
						}
					]
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.Submit",
			"title": "Pickup",
			"tooltip": "Schedule order for pickup"
		},
		{
			"type": "Action.Submit",
			"title": "Delivery",
			"isEnabled": false,
			"tooltip": "Your location is too far for delivery"
		}
	]
}

Adaptive Card