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

Image gallery sample

JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "TextBlock",
			"text": "Here are some cool photos",
			"size": "large",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "TextBlock",
			"text": "Sorry some of them are repeats",
			"size": "medium",
			"weight": "lighter",
			"wrap": true
		},
		{
			"type": "ImageSet",
			"imageSize": "medium",
			"images": [
				{
					"type": "Image",
					"url": "https://picsum.photos/200/200?image=100",
					"altText": "White beach panorama"
				},
				{
					"type": "Image",
					"url": "https://picsum.photos/300/200?image=200",
					"altText": "Cow on a grassy field"
				},
				{
					"type": "Image",
					"url": "https://picsum.photos/300/200?image=301",
					"altText": "Orange leaves on the sidewalk of a park"
				},
				{
					"type": "Image",
					"url": "https://picsum.photos/200/200?image=400",
					"altText": "Green leaves"
				},
				{
					"type": "Image",
					"url": "https://picsum.photos/300/200?image=500",
					"altText": "Top of a sky scrapper"
				},
				{
					"type": "Image",
					"url": "https://picsum.photos/200/200?image=600",
					"altText": "Foggy forest"
				},
				{
					"type": "Image",
					"url": "https://picsum.photos/300/200?image=700",
					"altText": "Picure of the blue ocean"
				},
				{
					"type": "Image",
					"url": "https://picsum.photos/300/200?image=800",
					"altText": "Crowded train station"
				},
				{
					"type": "Image",
					"url": "https://picsum.photos/300/200?image=900",
					"altText": "Sunset under a dock"
				}
			]
		}
	]
}
Data JSON
{
	"_type": "Images",
	"instrumentation": {
		"pingUrlBase": "https://www.bingapis.com/api/ping?IG=08FFB177A90A4DF585A703215CEC19AA&CID=070910FF0C0362112C11188E0DD06323&ID=",
		"pageLoadPingUrl": "https://www.bingapis.com/api/ping/pageload"
	},
	"readLink": "https://www.bing.com/api/V7/images/search?q=cats",
	"webSearchUrl": "https://www.bing.com/images/search?q=cats&FORM=OIIARP",
	"webSearchUrlPingSuffix": "DevEx,5042.1",
	"totalEstimatedMatches": 1000,
	"value": [
		{
			"name": "Proxecto Gato: cats wallpapers by bighdwallpapers",
			"webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=cats&id=DF010D14AC241C0AC39B5EAFD85F8B117825C79B&simid=608001210598098509",
			"webSearchUrlPingSuffix": "DevEx,5043.1",
			"thumbnailUrl": "https://tse2.mm.bing.net/th?id=OIP.M42428010d527fc1225757ada9d9a8bccH0&pid=Api",
			"datePublished": "2012-08-23T12:00:00",
			"contentUrl": "https://4.bp.blogspot.com/-XkviAtJ1s6Q/T3YFb2RUhDI/AAAAAAAAAVQ/EHomLZlFMKo/s1600/small+cat.jpg",
			"hostPageUrl": "https://proxectogato.blogspot.com/2012/08/cats-wallpapers-by-bighdwallpapers.html",
			"hostPageUrlPingSuffix": "DevEx,5006.1",
			"contentSize": "241661 B",
			"encodingFormat": "jpeg",
			"hostPageDisplayUrl": "proxectogato.blogspot.com/2012/08/cats-wallpapers-by...",
			"width": 1600,
			"height": 1200,
			"thumbnail": {
				"width": 480,
				"height": 360
			},
			"imageInsightsToken": "ccid_QkKAENUn*mid_DF010D14AC241C0AC39B5EAFD85F8B117825C79B*simid_608001210598098509",
			"insightsSourcesSummary": {
				"shoppingSourcesCount": 1,
				"recipeSourcesCount": 0
			},
			"imageId": "DF010D14AC241C0AC39B5EAFD85F8B117825C79B",
			"accentColor": "5A4E46"
		},
		{
			"name": "Kitten - Cats Wallpaper (18565791) - Fanpop",
			"webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=cats&id=6119DF9238F0C40EC3C326F41919BAFBF88F5CA4&simid=608041523156487908",
			"webSearchUrlPingSuffix": "DevEx,5044.1",
			"thumbnailUrl": "https://tse3.mm.bing.net/th?id=OIP.M7dfb8973bca22c4939102df3ae3de66do0&pid=Api",
			"datePublished": "2012-06-29T23:55:00",
			"contentUrl": "https://images4.fanpop.com/image/photos/18500000/Kitten-cats-18565791-1024-768.jpg",
			"hostPageUrl": "https://www.fanpop.com/clubs/cats/images/18565791/title/kitten-wallpaper",
			"hostPageUrlPingSuffix": "DevEx,5011.1",
			"contentSize": "207480 B",
			"encodingFormat": "jpeg",
			"hostPageDisplayUrl": "www.fanpop.com/clubs/cats/images/18565791/title/kitten-wallpaper",
			"width": 1024,
			"height": 768,
			"thumbnail": {
				"width": 300,
				"height": 225
			},
			"imageInsightsToken": "ccid_ffuJc7yi*mid_6119DF9238F0C40EC3C326F41919BAFBF88F5CA4*simid_608041523156487908",
			"insightsSourcesSummary": {
				"shoppingSourcesCount": 1,
				"recipeSourcesCount": 0
			},
			"imageId": "6119DF9238F0C40EC3C326F41919BAFBF88F5CA4",
			"accentColor": "7D694E"
		},
		{
			"name": "Wonderous Cats Admiration of the docile feline",
			"webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=cats&id=EDF89351A0ECA99617C859D06F71450FCB5EF2E3&simid=608032623984250213",
			"webSearchUrlPingSuffix": "DevEx,5045.1",
			"thumbnailUrl": "https://tse1.mm.bing.net/th?id=OIP.M38d3aa9aa6cc8c444492212efdb3a91dH0&pid=Api",
			"datePublished": "2014-04-27T22:53:00",
			"contentUrl": "https://www.andrew.cmu.edu/user/cfperron/cats/images/cat8.jpg",
			"hostPageUrl": "https://www.andrew.cmu.edu/user/cfperron/cats/",
			"hostPageUrlPingSuffix": "DevEx,5016.1",
			"contentSize": "484631 B",
			"encodingFormat": "jpeg",
			"hostPageDisplayUrl": "www.andrew.cmu.edu/user/cfperron/cats",
			"width": 2015,
			"height": 1511,
			"thumbnail": {
				"width": 480,
				"height": 359
			},
			"imageInsightsToken": "ccid_ONOqmqbM*mid_EDF89351A0ECA99617C859D06F71450FCB5EF2E3*simid_608032623984250213",
			"insightsSourcesSummary": {
				"shoppingSourcesCount": 1,
				"recipeSourcesCount": 0
			},
			"imageId": "EDF89351A0ECA99617C859D06F71450FCB5EF2E3",
			"accentColor": "5F4937"
		}
	],
	"queryExpansions": [
		{
			"text": "Grumpy Cat",
			"displayText": "Grumpy",
			"webSearchUrl": "https://www.bing.com/images/search?q=Grumpy+Cat&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Grumpy%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d&FORM=IRPATC",
			"webSearchUrlPingSuffix": "DevEx,5049.1",
			"searchLink": "https://www.bing.com/api/V7/images/search?q=Grumpy+Cat&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Grumpy%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d",
			"thumbnail": {
				"thumbnailUrl": "https://tse3.mm.bing.net/th?q=Grumpy+Cat&pid=Api&mkt=en-US&adlt=moderate&t=1"
			}
		},
		{
			"text": "Funny Cats",
			"displayText": "Funny",
			"webSearchUrl": "https://www.bing.com/images/search?q=Funny+Cats&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Funny%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d&FORM=IRPATC",
			"webSearchUrlPingSuffix": "DevEx,5051.1",
			"searchLink": "https://www.bing.com/api/V7/images/search?q=Funny+Cats&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Funny%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d",
			"thumbnail": {
				"thumbnailUrl": "https://tse2.mm.bing.net/th?q=Funny+Cats&pid=Api&mkt=en-US&adlt=moderate&t=1"
			}
		}
	],
	"nextOffsetAddCount": 0,
	"pivotSuggestions": [
		{
			"pivot": "cats",
			"suggestions": [
				{
					"text": "Felidae",
					"displayText": "Felidae",
					"webSearchUrl": "https://www.bing.com/images/search?q=Felidae&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Felidae%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d&FORM=IRQBPS",
					"webSearchUrlPingSuffix": "DevEx,5134.1",
					"searchLink": "https://www.bing.com/api/V7/images/search?q=Felidae&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Felidae%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d",
					"thumbnail": {
						"thumbnailUrl": "https://tse3.mm.bing.net/th?q=Felidae&pid=Api&mkt=en-US&adlt=moderate&t=1"
					}
				},
				{
					"text": "African Wildcat",
					"displayText": "African Wildcat",
					"webSearchUrl": "https://www.bing.com/images/search?q=African+Wildcat&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22African+Wildcat%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d&FORM=IRQBPS",
					"webSearchUrlPingSuffix": "DevEx,5136.1",
					"searchLink": "https://www.bing.com/api/V7/images/search?q=African+Wildcat&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22African+Wildcat%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d",
					"thumbnail": {
						"thumbnailUrl": "https://tse3.mm.bing.net/th?q=African+Wildcat&pid=Api&mkt=en-US&adlt=moderate&t=1"
					}
				}
			]
		}
	],
	"displayShoppingSourcesBadges": false,
	"displayRecipeSourcesBadges": true
}
Template JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "TextBlock",
			"text": "Here are some cool photos",
			"size": "large",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "TextBlock",
			"text": "Sorry some of them are repeats",
			"size": "medium",
			"weight": "lighter",
			"wrap": true
		},
		{
			"type": "ImageSet",
			"imageSize": "medium",
			"images": [
				{
					"type": "Image",
					"url": "${value[0].contentUrl}",
					"altText": "${value[0].name}"
				},
				{
					"type": "Image",
					"url": "${value[1].contentUrl}",
					"altText": "${value[1].name}"
				},
				{
					"type": "Image",
					"url": "${queryExpansions[0].thumbnail.thumbnailUrl}",
					"altText": "${queryExpansions[0].thumbnail.name}"
				},
				{
					"type": "Image",
					"url": "${queryExpansions[1].thumbnail.thumbnailUrl}",
					"altText": "${queryExpansions[1].thumbnail.name}"
				},
				{
					"type": "Image",
					"url": "${pivotSuggestions[0].suggestions[0].thumbnail.thumbnailUrl}",
					"altText": "${pivotSuggestions[0].suggestions[0].thumbnail.name}"
				},
				{
					"type": "Image",
					"url": "${pivotSuggestions[0].suggestions[1].thumbnail.thumbnailUrl}",
					"altText": "${pivotSuggestions[0].suggestions[1].thumbnail.name}"
				},
				{
					"type": "Image",
					"url": "${value[2].thumbnailUrl}",
					"altText": "${value[2].name}"
				}
			]
		}
	]
}
Adaptive Card