Samples

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:

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": "http://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": "http://messagecardplayground.azurewebsites.net/assets/graydot2x2.png",
													"width": "10000px",
													"height": "2px"
												}
											],
											"width": "stretch"
										},
										{
											"type": "Column",
											"spacing": "Small",
											"verticalContentAlignment": "Center",
											"items": [
												{
													"type": "Image",
													"url": "http://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
{ "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": "http://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": "http://messagecardplayground.azurewebsites.net/assets/graydot2x2.png", "width": "10000px", "height": "2px" } ], "width": "stretch" }, { "type": "Column", "spacing": "Small", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "url": "http://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" }