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

Sporting event sample

JSON 
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"speak": "The Seattle Seahawks beat the Carolina Panthers 40-7",
	"body": [
		{
			"type": "TextBlock",
			"text": "Scoreboard",
			"wrap": true,
			"style": "heading",
			"horizontalAlignment": "center"
		},
		{
			"type": "Container",
			"items": [
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"width": "auto",
							"items": [
								{
									"type": "Image",
									"url": "https://adaptivecards.io/content/cats/3.png",
									"size": "small",
									"altText": "Shades cat team emblem"
								},
								{
									"type": "TextBlock",
									"text": "SHADES",
									"horizontalAlignment": "center",
									"weight": "bolder",
									"wrap": true
								}
							]
						},
						{
							"type": "Column",
							"width": "stretch",
							"separator": true,
							"spacing": "medium",
							"items": [
								{
									"type": "TextBlock",
									"text": "Sat, Aug 31, 2019",
									"horizontalAlignment": "center",
									"wrap": true
								},
								{
									"type": "TextBlock",
									"text": "Final",
									"spacing": "none",
									"horizontalAlignment": "center",
									"wrap": true
								},
								{
									"type": "TextBlock",
									"text": "45 - 7",
									"size": "extraLarge",
									"horizontalAlignment": "center",
									"wrap": true
								}
							]
						},
						{
							"type": "Column",
							"width": "auto",
							"separator": true,
							"spacing": "medium",
							"items": [
								{
									"type": "Image",
									"url": "https://adaptivecards.io/content/cats/2.png",
									"size": "small",
									"horizontalAlignment": "center",
									"altText": "Skins cat team emblem"
								},
								{
									"type": "TextBlock",
									"text": "SKINS",
									"horizontalAlignment": "center",
									"weight": "bolder",
									"wrap": true
								}
							]
						}
					]
				}
			]
		}
	]
}
Data JSON 
{
	"id": 401117857,
	"season": 2019,
	"week": 1,
	"season_type": "regular",
	"start_date": "2019-08-31T19:30:00Z",
	"neutral_site": false,
	"conference_game": false,
	"attendance": null,
	"venue_id": 3852,
	"venue": "Navy-Marine Corps Memorial Stadium",
	"home_team": "Navy",
	"home_conference": "American Athletic",
	"home_points": 45,
	"home_line_scores": [10, 14, 14, 7],
	"away_team": "Holy Cross",
	"away_conference": null,
	"away_points": 7,
	"away_line_scores": [0, 7, 0, 0]
}
Template JSON 
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"speak": "The Seattle Seahawks beat the Carolina Panthers 40-7",
	"body": [
		{
			"type": "TextBlock",
			"text": "Scoreboard",
			"wrap": true,
			"style": "heading",
			"horizontalAlignment": "center"
		},
		{
			"type": "Container",
			"items": [
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"width": "auto",
							"items": [
								{
									"type": "Image",
									"url": "https://adaptivecards.io/content/cats/3.png",
									"size": "medium",
									"altText": "Shades cat team emblem"
								},
								{
									"type": "TextBlock",
									"text": "SHADES",
									"horizontalAlignment": "center",
									"weight": "bolder",
									"wrap": true
								}
							]
						},
						{
							"type": "Column",
							"width": "stretch",
							"separator": true,
							"spacing": "medium",
							"items": [
								{
									"type": "TextBlock",
									"text": "{{DATE(${string(start_date)}, SHORT)}}",
									"horizontalAlignment": "center",
									"wrap": true
								},
								{
									"type": "TextBlock",
									"text": "Final",
									"spacing": "none",
									"horizontalAlignment": "center",
									"wrap": true
								},
								{
									"type": "TextBlock",
									"text": "${home_points} - ${away_points}",
									"size": "extraLarge",
									"horizontalAlignment": "center",
									"wrap": true
								}
							]
						},
						{
							"type": "Column",
							"width": "auto",
							"separator": true,
							"spacing": "medium",
							"items": [
								{
									"type": "Image",
									"url": "https://adaptivecards.io/content/cats/2.png",
									"size": "medium",
									"horizontalAlignment": "center",
									"altText": "Skins cat team emblem"
								},
								{
									"type": "TextBlock",
									"text": "SKINS",
									"horizontalAlignment": "center",
									"weight": "bolder",
									"wrap": true
								}
							]
						}
					]
				}
			]
		}
	]
}
Adaptive Card