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:

Adaptive Card 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. More about templating

Flight details sample

JSON
{
	"type": "AdaptiveCard",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "Container",
							"backgroundImage": "http://messagecardplayground.azurewebsites.net/assets/TxP_Background.png",
							"items": [
								{
									"type": "Image",
									"horizontalAlignment": "Center",
									"url": "https://messagecardplayground.azurewebsites.net/assets/TxP_Flight.png"
								}
							],
							"bleed": true
						},
						{
							"type": "Container",
							"spacing": "None",
							"style": "emphasis",
							"items": [
								{
									"type": "TextBlock",
									"size": "ExtraLarge",
									"weight": "Lighter",
									"color": "Accent",
									"text": "Flight to Paris",
									"wrap": true
								},
								{
									"type": "TextBlock",
									"spacing": "Small",
									"text": "Delta Air Lines flight 8471",
									"wrap": true
								},
								{
									"type": "TextBlock",
									"spacing": "None",
									"text": "Confirmation code: ABCDEF",
									"wrap": true
								},
								{
									"type": "TextBlock",
									"spacing": "None",
									"text": "10 hours 45 minutes",
									"wrap": true
								}
							],
							"bleed": true,
							"height": "stretch"
						}
					],
					"width": 45,
					"height": "stretch"
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "Container",
							"height": "stretch",
							"items": [
								{
									"type": "ColumnSet",
									"columns": [
										{
											"type": "Column",
											"items": [
												{
													"type": "TextBlock",
													"size": "ExtraLarge",
													"weight": "Lighter",
													"text": "BLR"
												}
											],
											"width": "auto"
										},
										{
											"type": "Column",
											"verticalContentAlignment": "Center",
											"items": [
												{
													"type": "Image",
													"url": "https://messagecardplayground.azurewebsites.net/assets/graydot2x2.png",
													"width": "10000px",
													"height": "2px"
												}
											],
											"width": "stretch"
										},
										{
											"type": "Column",
											"spacing": "Small",
											"verticalContentAlignment": "Center",
											"items": [
												{
													"type": "Image",
													"url": "https://messagecardplayground.azurewebsites.net/assets/smallairplane.png",
													"height": "16px"
												}
											],
											"width": "auto"
										},
										{
											"type": "Column",
											"items": [
												{
													"type": "TextBlock",
													"horizontalAlignment": "Right",
													"size": "ExtraLarge",
													"weight": "Lighter",
													"text": "CDG"
												}
											],
											"width": "auto"
										}
									]
								},
								{
									"type": "ColumnSet",
									"columns": [
										{
											"type": "Column",
											"items": [
												{
													"type": "TextBlock",
													"size": "Medium",
													"text": "1:55 AM"
												}
											],
											"width": 1
										},
										{
											"type": "Column",
											"items": [
												{
													"type": "TextBlock",
													"horizontalAlignment": "Right",
													"size": "Medium",
													"text": "8:10 AM"
												}
											],
											"width": 1
										}
									]
								},
								{
									"type": "ColumnSet",
									"spacing": "None",
									"columns": [
										{
											"type": "Column",
											"items": [
												{
													"type": "TextBlock",
													"text": "November 12, 2017",
													"isSubtle": true,
													"wrap": true
												}
											],
											"width": 1
										},
										{
											"type": "Column",
											"items": [
												{
													"type": "TextBlock",
													"horizontalAlignment": "Right",
													"text": "November 12, 2017",
													"isSubtle": true,
													"wrap": true
												}
											],
											"width": 1
										}
									]
								},
								{
									"type": "ColumnSet",
									"spacing": "None",
									"columns": [
										{
											"type": "Column",
											"items": [
												{
													"type": "TextBlock",
													"text": "Bengaluru",
													"isSubtle": true
												}
											],
											"width": 1
										},
										{
											"type": "Column",
											"items": [
												{
													"type": "TextBlock",
													"horizontalAlignment": "Right",
													"text": "Paris",
													"isSubtle": true
												}
											],
											"width": 1
										}
									],
									"height": "stretch"
								},
								{
									"type": "ActionSet",
									"separator": true,
									"actions": [
										{
											"type": "Action.Submit",
											"title": "Check in",
											"style": "positive"
										},
										{
											"type": "Action.Submit",
											"title": "View in calendar"
										}
									],
									"spacing": "Medium"
								}
							]
						}
					],
					"width": 55
				}
			],
			"height": "stretch"
		}
	],
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"version": "1.0"
}
Adaptive Card