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

Weather large sample

JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"speak": "Weather forecast for Monday is high of 62 and low of 42 degrees with a 20% chance of rainWinds will be 5 mph from the northeast",
	"backgroundImage": "https://adaptivecards.io/content/Mostly%20Cloudy-Background.jpg",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": "35",
					"items": [
						{
							"type": "Image",
							"url": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
							"size": "stretch",
							"altText": "Mostly cloudy weather"
						}
					]
				},
				{
					"type": "Column",
					"width": "65",
					"items": [
						{
							"type": "TextBlock",
							"text": "Tue, Nov 5, 2019",
							"weight": "bolder",
							"size": "large",
							"wrap": true,
							"color": "dark",
							"style": "heading"
						},
						{
							"type": "TextBlock",
							"text": "32 / 50",
							"size": "medium",
							"spacing": "none",
							"wrap": true,
							"color": "dark"
						},
						{
							"type": "TextBlock",
							"text": "31% chance of rain",
							"spacing": "none",
							"wrap": true,
							"color": "dark"
						},
						{
							"type": "TextBlock",
							"text": "Winds 4.4 mph SSE",
							"spacing": "none",
							"wrap": true,
							"color": "dark"
						}
					]
				}
			]
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": "20",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"wrap": true,
							"text": "Wednesday",
							"color": "dark"
						},
						{
							"type": "Image",
							"size": "auto",
							"url": "https://adaptivecards.io/content/Drizzle-Square.png",
							"altText": "Drizzly weather"
						},
						{
							"type": "TextBlock",
							"text": "**High**\t50",
							"wrap": true,
							"color": "dark",
							"horizontalAlignment": "center"
						},
						{
							"type": "TextBlock",
							"text": "**Low**\t32",
							"wrap": true,
							"color": "dark",
							"spacing": "none",
							"horizontalAlignment": "center"
						}
					],
					"selectAction": {
						"type": "Action.OpenUrl",
						"title": "View Wednesday, Drizzly weather. Highest temperature 50 degrees. Lowest temperature 32 degrees.",
						"url": "https://www.microsoft.com"
					}
				},
				{
					"type": "Column",
					"width": "20",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"wrap": true,
							"text": "Thursday",
							"color": "dark"
						},
						{
							"type": "Image",
							"size": "auto",
							"url": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
							"altText": "Mostly cloudy weather"
						},
						{
							"type": "TextBlock",
							"text": "**High**\t50",
							"color": "dark",
							"wrap": true,
							"horizontalAlignment": "center"
						},
						{
							"type": "TextBlock",
							"text": "**Low**\t32",
							"wrap": true,
							"color": "dark",
							"spacing": "none",
							"horizontalAlignment": "center"
						}
					],
					"selectAction": {
						"type": "Action.OpenUrl",
						"title": "View Thursday, Mostly cloudy weather. Highest temperature 50 degrees. Lowest temperature 32 degrees.",
						"url": "https://www.microsoft.com"
					}
				},
				{
					"type": "Column",
					"width": "20",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"wrap": true,
							"text": "Friday",
							"color": "dark"
						},
						{
							"type": "Image",
							"size": "auto",
							"url": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
							"altText": "Mostly cloudy weather"
						},
						{
							"type": "TextBlock",
							"text": "**High**\t59",
							"wrap": true,
							"color": "dark",
							"horizontalAlignment": "center"
						},
						{
							"type": "TextBlock",
							"text": "**Low**\t32",
							"wrap": true,
							"color": "dark",
							"spacing": "none",
							"horizontalAlignment": "center"
						}
					],
					"selectAction": {
						"type": "Action.OpenUrl",
						"title": "View Friday, Mostly cloudy weather. Highest temperature 59 degrees. Lowest temperature 32 degrees.",
						"url": "https://www.microsoft.com"
					}
				},
				{
					"type": "Column",
					"width": "20",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"wrap": true,
							"text": "Saturday",
							"color": "dark"
						},
						{
							"type": "Image",
							"size": "auto",
							"url": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
							"altText": "Mostly cloudy weather"
						},
						{
							"type": "TextBlock",
							"text": "**High**\t50",
							"wrap": true,
							"color": "dark",
							"horizontalAlignment": "center"
						},
						{
							"type": "TextBlock",
							"text": "**Low**\t32",
							"wrap": true,
							"color": "dark",
							"spacing": "none",
							"horizontalAlignment": "center"
						}
					],
					"selectAction": {
						"type": "Action.OpenUrl",
						"title": "View Saturday, Mostly cloudy weather. Highest temperature 50 degrees. Lowest temperature 32 degrees.",
						"url": "https://www.microsoft.com"
					}
				}
			]
		}
	]
}
Data JSON
{
	"data": [
		{
			"moonrise_ts": 1572993161,
			"wind_cdir": "SSE",
			"rh": 90,
			"pres": 1012.95,
			"high_temp": 8.6,
			"sunset_ts": 1573001147,
			"ozone": 252.181,
			"moon_phase": 0.768526,
			"wind_gust_spd": 4.4,
			"snow_depth": 0,
			"clouds": 70,
			"ts": 1572940860,
			"sunrise_ts": 1572966051,
			"app_min_temp": 3.7,
			"wind_spd": 1.33298,
			"pop": 25,
			"wind_cdir_full": "south-southeast",
			"slp": 1021.94,
			"valid_date": "2019-11-05",
			"app_max_temp": 10.2,
			"vis": 22.5692,
			"dewpt": 6.8,
			"snow": 0,
			"uv": 1.74992,
			"weather": {
				"icon": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
				"code": 803,
				"description": "Broken clouds"
			},
			"wind_dir": 162,
			"max_dhi": null,
			"clouds_hi": 0,
			"precip": 0.3125,
			"low_temp": 7.7,
			"max_temp": 10.4,
			"moonset_ts": 1572946958,
			"datetime": "2019-11-05",
			"temp": 8.5,
			"min_temp": 5.7,
			"clouds_mid": 0,
			"clouds_low": 70
		},
		{
			"moonrise_ts": 1573081007,
			"wind_cdir": "NNE",
			"rh": 88,
			"pres": 1015.48,
			"high_temp": 12.3,
			"sunset_ts": 1573087463,
			"ozone": 263.048,
			"moon_phase": 0.845631,
			"wind_gust_spd": 5,
			"snow_depth": 0,
			"clouds": 60,
			"ts": 1573027260,
			"sunrise_ts": 1573052542,
			"app_min_temp": 3.3,
			"wind_spd": 1.50821,
			"pop": 35,
			"wind_cdir_full": "north-northeast",
			"slp": 1024.5,
			"valid_date": "2019-11-06",
			"app_max_temp": 12.3,
			"vis": 23.125,
			"dewpt": 6.6,
			"snow": 0,
			"uv": 2.93193,
			"weather": {
				"icon": "https://adaptivecards.io/content/Drizzle-Square.png",
				"code": 803,
				"description": "Broken clouds"
			},
			"wind_dir": 18,
			"max_dhi": null,
			"clouds_hi": 17,
			"precip": 0.5,
			"low_temp": 5,
			"max_temp": 12.3,
			"moonset_ts": 1573037127,
			"datetime": "2019-11-06",
			"temp": 8.5,
			"min_temp": 6.6,
			"clouds_mid": 9,
			"clouds_low": 46
		},
		{
			"moonrise_ts": 1573168702,
			"wind_cdir": "SE",
			"rh": 71,
			"pres": 1006.39,
			"high_temp": 13.1,
			"sunset_ts": 1573173781,
			"ozone": 257.617,
			"moon_phase": 0.909923,
			"wind_gust_spd": 1.80495,
			"snow_depth": 0,
			"clouds": 94,
			"ts": 1573113660,
			"sunrise_ts": 1573139032,
			"app_min_temp": 0.5,
			"wind_spd": 0.77653,
			"pop": 0,
			"wind_cdir_full": "southeast",
			"slp": 1022.86,
			"valid_date": "2019-11-07",
			"app_max_temp": 13.1,
			"vis": 24.135,
			"dewpt": 2.6,
			"snow": 0,
			"uv": 1.10983,
			"weather": {
				"icon": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
				"code": 804,
				"description": "Overcast clouds"
			},
			"wind_dir": 136,
			"max_dhi": null,
			"clouds_hi": 94,
			"precip": 0,
			"low_temp": 4.4,
			"max_temp": 13.4,
			"moonset_ts": 1573127315,
			"datetime": "2019-11-07",
			"temp": 7.7,
			"min_temp": 4.2,
			"clouds_mid": 0,
			"clouds_low": 0
		},
		{
			"moonrise_ts": 1573256318,
			"wind_cdir": "SSE",
			"rh": 71,
			"pres": 1006.02,
			"high_temp": 15.8,
			"sunset_ts": 1573260100,
			"ozone": 258.722,
			"moon_phase": 0.958606,
			"wind_gust_spd": 2.11071,
			"snow_depth": 0,
			"clouds": 93,
			"ts": 1573200060,
			"sunrise_ts": 1573225523,
			"app_min_temp": 2.7,
			"wind_spd": 0.802894,
			"pop": 0,
			"wind_cdir_full": "south-southeast",
			"slp": 1022.2,
			"valid_date": "2019-11-08",
			"app_max_temp": 15.8,
			"vis": 24.1349,
			"dewpt": 4.5,
			"snow": 0,
			"uv": 0.989995,
			"weather": {
				"icon": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
				"code": 804,
				"description": "Overcast clouds"
			},
			"wind_dir": 167,
			"max_dhi": null,
			"clouds_hi": 93,
			"precip": 0,
			"low_temp": 6.1,
			"max_temp": 15.9,
			"moonset_ts": 1573217557,
			"datetime": "2019-11-08",
			"temp": 9.6,
			"min_temp": 6,
			"clouds_mid": 6,
			"clouds_low": 0
		},
		{
			"moonrise_ts": 1573343920,
			"wind_cdir": "SW",
			"rh": 78,
			"pres": 1008.56,
			"high_temp": 14,
			"sunset_ts": 1573346422,
			"ozone": 257.936,
			"moon_phase": 0.988998,
			"wind_gust_spd": 3.61965,
			"snow_depth": 0,
			"clouds": 88,
			"ts": 1573286460,
			"sunrise_ts": 1573312013,
			"app_min_temp": 2.5,
			"wind_spd": 1.00688,
			"pop": 0,
			"wind_cdir_full": "southwest",
			"slp": 1024.28,
			"valid_date": "2019-11-09",
			"app_max_temp": 14,
			"vis": 24.135,
			"dewpt": 5.2,
			"snow": 0,
			"uv": 1.06772,
			"weather": {
				"icon": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
				"code": 804,
				"description": "Overcast clouds"
			},

			"wind_dir": 228,
			"max_dhi": null,
			"clouds_hi": 88,
			"precip": 0,
			"low_temp": 5,
			"max_temp": 14.1,
			"moonset_ts": 1573307883,
			"datetime": "2019-11-09",
			"temp": 9,
			"min_temp": 5.9,
			"clouds_mid": 13,
			"clouds_low": 0
		}
	],
	"city_name": "King",
	"lon": "-122.1232",
	"timezone": "America/Los_Angeles",
	"lat": "47.6718",
	"country_code": "US",
	"state_code": "WA"
}
Template JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"speak": "Weather forecast for ${formatEpoch(data[0].sunrise_ts, 'dddd')} is high of ${formatNumber(data[0].app_max_temp / 5 * 9 + 32, 0)} and low of ${formatNumber(data[0].app_min_temp / 5 * 9 + 32, 0)} degrees with a ${formatNumber(data[0].precip * 100, 0)}% chance of rainWinds will be ${formatNumber(data[0].wind_gust_spd, 0)} mph from the ${data[0].wind_cdir}",
	"backgroundImage": "https://adaptivecards.io/content/Mostly%20Cloudy-Background.jpg",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": 35,
					"items": [
						{
							"type": "Image",
							"url": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
							"size": "stretch",
							"altText": "Mostly cloudy weather"
						}
					]
				},
				{
					"type": "Column",
					"width": 65,
					"items": [
						{
							"type": "TextBlock",
							"text": "{{DATE(${formatEpoch(data[0].sunrise_ts, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}",
							"weight": "bolder",
							"size": "large",
							"wrap": true,
							"color": "dark",
							"style": "heading"
						},
						{
							"type": "TextBlock",
							"text": "${formatNumber(data[0].app_min_temp / 5 * 9 + 32, 0)} / ${formatNumber(data[0].app_max_temp / 5 * 9 + 32, 0)}",
							"size": "medium",
							"spacing": "none",
							"wrap": true,
							"color": "dark"
						},
						{
							"type": "TextBlock",
							"text": "${formatNumber(data[0].precip * 100, 0)}% chance of rain",
							"spacing": "none",
							"wrap": true,
							"color": "dark"
						},
						{
							"type": "TextBlock",
							"text": "Winds ${data[0].wind_gust_spd} mph ${data[0].wind_cdir}",
							"spacing": "none",
							"wrap": true,
							"color": "dark"
						}
					]
				}
			]
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"$data": "${data}",
					"$when": "${$index != 0}",
					"type": "Column",
					"width": 20,
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "${formatEpoch(sunrise_ts, 'dddd')}",
							"wrap": true,
							"color": "dark"
						},
						{
							"type": "Image",
							"size": "auto",
							"url": "${weather.icon}",
							"altText": "${weather.description}"
						},
						{
							"type": "TextBlock",
							"text": "**High**\t${formatNumber(app_max_temp / 5 * 9  + 32, 0)}",
							"wrap": true,
							"color": "dark",
							"horizontalAlignment": "center"
						},
						{
							"type": "TextBlock",
							"text": "**Low**\t${formatNumber(app_min_temp / 5 * 9  + 32, 0)}",
							"wrap": true,
							"color": "dark",
							"spacing": "none",
							"horizontalAlignment": "center"
						}
					],
					"selectAction": {
						"type": "Action.OpenUrl",
						"title": "View ${formatEpoch(sunrise_ts, 'dddd')}, ${weather.description}. Highest temperature ${formatNumber(app_max_temp / 5 * 9  + 32, 0)} degrees. Lowest temperature ${formatNumber(app_min_temp / 5 * 9  + 32, 0)} degrees.",
						"url": "https://www.microsoft.com"
					}
				}
			]
		}
	]
}
Adaptive Card