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!

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

Food orderv2 sample

JSON 
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "TextBlock",
			"text": "Your registration is almost complete",
			"size": "medium",
			"weight": "bolder"
		},
		{
			"type": "TextBlock",
			"text": "What type of food do you prefer?",
			"wrap": true
		},
		{
			"type": "ImageSet",
			"imageSize": "medium",
			"images": [
				{
					"type": "Image",
					"url": "https://contososcubademo.azurewebsites.net/assets/steak.jpg",
					"altText": "Steak cut with fries"
				},
				{
					"type": "Image",
					"url": "https://contososcubademo.azurewebsites.net/assets/chicken.jpg",
					"altText": "Fried chicken with lettuce"
				},
				{
					"type": "Image",
					"url": "https://contososcubademo.azurewebsites.net/assets/tofu.jpg",
					"altText": "Tofu topped with red sauce"
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "Steak",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "Input.ChoiceSet",
						"id": "SteakTemp",
						"style": "expanded",
						"label": "How would you like your steak prepared?",
						"isRequired": true,
						"errorMessage": "Please select one of the above options",
						"choices": [
							{
								"title": "Rare",
								"value": "rare"
							},
							{
								"title": "Medium-Rare",
								"value": "medium-rare"
							},
							{
								"title": "Well-done",
								"value": "well-done"
							}
						]
					},
					{
						"type": "Input.Text",
						"id": "SteakOther",
						"isMultiline": true,
						"label": "Any other preparation requests?"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "OK",
						"data": {
							"FoodChoice": "Steak"
						}
					}
				]
			}
		},
		{
			"type": "Action.ShowCard",
			"title": "Chicken",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "Input.Toggle",
						"id": "ChickenAllergy",
						"valueOn": "noPeanuts",
						"valueOff": "peanuts",
						"title": "I'm allergic to peanuts",
						"label": "Do you have any allergies?"
					},
					{
						"type": "Input.Text",
						"id": "ChickenOther",
						"isMultiline": true,
						"label": "Any other preparation requests?"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "OK",
						"data": {
							"FoodChoice": "Chicken"
						}
					}
				]
			}
		},
		{
			"type": "Action.ShowCard",
			"title": "Tofu",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "Input.Toggle",
						"id": "Vegetarian",
						"title": "Please prepare it vegan",
						"valueOn": "vegan",
						"valueOff": "notVegan",
						"label": "Would you like it prepared vegan?"
					},
					{
						"type": "Input.Text",
						"id": "VegOther",
						"isMultiline": true,
						"label": "Any other preparation requests?"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "OK",
						"data": {
							"FoodChoice": "Vegetarian"
						}
					}
				]
			}
		}
	]
}
Adaptive Card