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

Expense report sample

JSON
{
	"type": "AdaptiveCard",
	"body": [
		{
			"type": "Container",
			"style": "emphasis",
			"items": [
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"items": [
								{
									"type": "TextBlock",
									"size": "Large",
									"weight": "Bolder",
									"text": "**EXPENSE APPROVAL**"
								}
							],
							"width": "stretch"
						},
						{
							"type": "Column",
							"items": [
								{
									"type": "Image",
									"url": "https://adaptivecards.io/content/pending.png",
									"height": "30px",
									"altText": "Pending"
								}
							],
							"width": "auto"
						}
					]
				}
			],
			"bleed": true
		},
		{
			"type": "Container",
			"items": [
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"items": [
								{
									"type": "TextBlock",
									"size": "ExtraLarge",
									"text": "Trip to UAE",
									"wrap": true
								},
								{
									"type": "TextBlock",
									"spacing": "Small",
									"size": "Small",
									"weight": "Bolder",
									"color": "Accent",
									"text": "[ER-13052](https://adaptivecards.io)"
								}
							],
							"width": "stretch"
						},
						{
							"type": "Column",
							"items": [
								{
									"type": "ActionSet",
									"actions": [
										{
											"type": "Action.OpenUrl",
											"title": "EXPORT AS PDF",
											"url": "https://adaptivecards.io"
										}
									]
								}
							],
							"width": "auto"
						}
					]
				},
				{
					"type": "FactSet",
					"spacing": "Large",
					"facts": [
						{
							"title": "Submitted By",
							"value": "**Matt Hidinger**  matt@contoso.com"
						},
						{
							"title": "Duration",
							"value": "2019/06/19 - 2019/06/25"
						},
						{
							"title": "Submitted On",
							"value": "2019/04/14"
						},
						{
							"title": "Reimbursable Amount",
							"value": "$ 404.30"
						},
						{
							"title": "Awaiting approval from",
							"value": "**Thomas**  thomas@contoso.com"
						},
						{
							"title": "Submitted to",
							"value": "**David**   david@contoso.com"
						}
					]
				}
			]
		},
		{
			"type": "Container",
			"spacing": "Large",
			"style": "emphasis",
			"items": [
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"items": [
								{
									"type": "TextBlock",
									"weight": "Bolder",
									"text": "DATE"
								}
							],
							"width": "auto"
						},
						{
							"type": "Column",
							"spacing": "Large",
							"items": [
								{
									"type": "TextBlock",
									"weight": "Bolder",
									"text": "CATEGORY"
								}
							],
							"width": "stretch"
						},
						{
							"type": "Column",
							"items": [
								{
									"type": "TextBlock",
									"weight": "Bolder",
									"text": "AMOUNT"
								}
							],
							"width": "auto"
						}
					]
				}
			],
			"bleed": true
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "06/19",
							"wrap": true
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"spacing": "Medium",
					"items": [
						{
							"type": "TextBlock",
							"text": "Air Travel Expense",
							"wrap": true
						}
					],
					"width": "stretch"
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "$ 300",
							"wrap": true
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"id": "chevronDown1",
					"spacing": "Small",
					"verticalContentAlignment": "Center",
					"items": [
						{
							"type": "Image",
							"selectAction": {
								"type": "Action.ToggleVisibility",
								"title": "collapse",
								"targetElements": [
									"cardContent1",
									"chevronUp1",
									"chevronDown1"
								]
							},
							"url": "https://adaptivecards.io/content/down.png",
							"width": "20px",
							"altText": "collapsed"
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"id": "chevronUp1",
					"isVisible": false,
					"spacing": "Small",
					"verticalContentAlignment": "Center",
					"items": [
						{
							"type": "Image",
							"selectAction": {
								"type": "Action.ToggleVisibility",
								"title": "expand",
								"targetElements": [
									"cardContent1",
									"chevronUp1",
									"chevronDown1"
								]
							},
							"url": "https://adaptivecards.io/content/up.png",
							"width": "20px",
							"altText": "expanded"
						}
					],
					"width": "auto"
				}
			]
		},
		{
			"type": "Container",
			"id": "cardContent1",
			"isVisible": false,
			"items": [
				{
					"type": "Container",
					"items": [
						{
							"type": "TextBlock",
							"text": "* Leg 1 on Tue, Jun 19th, 2019 at 6:00 AM.",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "* Leg 2 on Tue,Jun 19th, 2019 at 7:15 PM.",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "Container",
							"items": [
								{
									"type": "Input.Text",
									"id": "comment1",
									"placeholder": "Add your comment here."
								}
							]
						}
					]
				},
				{
					"type": "Container",
					"items": [
						{
							"type": "ColumnSet",
							"columns": [
								{
									"type": "Column",
									"items": [
										{
											"type": "ActionSet",
											"actions": [
												{
													"type": "Action.Submit",
													"title": "Send",
													"data": {
														"id": "_qkQW8dJlUeLVi7ZMEzYVw",
														"action": "comment",
														"lineItem": 1
													}
												}
											]
										}
									],
									"width": "auto"
								}
							]
						}
					]
				}
			]
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "Center",
							"text": "06/19",
							"wrap": true
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"spacing": "Medium",
					"items": [
						{
							"type": "TextBlock",
							"text": "Auto Mobile Expense",
							"wrap": true
						}
					],
					"width": "stretch"
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "$ 100",
							"wrap": true
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"id": "chevronDown2",
					"spacing": "Small",
					"verticalContentAlignment": "Center",
					"items": [
						{
							"type": "Image",
							"selectAction": {
								"type": "Action.ToggleVisibility",
								"title": "collapse",
								"targetElements": [
									"cardContent2",
									"chevronUp2",
									"chevronDown2"
								]
							},
							"url": "https://adaptivecards.io/content/down.png",
							"width": "20px",
							"altText": "collapsed"
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"id": "chevronUp2",
					"isVisible": false,
					"spacing": "Small",
					"verticalContentAlignment": "Center",
					"items": [
						{
							"type": "Image",
							"selectAction": {
								"type": "Action.ToggleVisibility",
								"title": "expand",
								"targetElements": [
									"cardContent2",
									"chevronUp2",
									"chevronDown2"
								]
							},
							"url": "https://adaptivecards.io/content/up.png",
							"width": "20px",
							"altText": "expanded"
						}
					],
					"width": "auto"
				}
			]
		},
		{
			"type": "Container",
			"id": "cardContent2",
			"isVisible": false,
			"items": [
				{
					"type": "Container",
					"items": [
						{
							"type": "TextBlock",
							"text": "* Contoso Car Rentrals, Tues 6/19 at 7:00 AM",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "Container",
							"items": [
								{
									"type": "Input.Text",
									"id": "comment2",
									"placeholder": "Add your comment here."
								}
							]
						}
					]
				},
				{
					"type": "Container",
					"items": [
						{
							"type": "ColumnSet",
							"columns": [
								{
									"type": "Column",
									"items": [
										{
											"type": "ActionSet",
											"actions": [
												{
													"type": "Action.Submit",
													"title": "Send",
													"data": {
														"id": "_qkQW8dJlUeLVi7ZMEzYVw",
														"action": "comment",
														"lineItem": 2
													}
												}
											]
										}
									],
									"width": "auto"
								}
							]
						}
					]
				}
			]
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "Center",
							"text": "06/25",
							"wrap": true
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"spacing": "Medium",
					"items": [
						{
							"type": "TextBlock",
							"text": "Air Travel Expense",
							"wrap": true
						}
					],
					"width": "stretch"
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "$ 4.30",
							"wrap": true
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"id": "chevronDown3",
					"spacing": "Small",
					"verticalContentAlignment": "Center",
					"items": [
						{
							"type": "Image",
							"selectAction": {
								"type": "Action.ToggleVisibility",
								"title": "collapse",
								"targetElements": [
									"cardContent3",
									"chevronUp3",
									"chevronDown3"
								]
							},
							"url": "https://adaptivecards.io/content/down.png",
							"width": "20px",
							"altText": "collapsed"
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"id": "chevronUp3",
					"isVisible": false,
					"spacing": "Small",
					"verticalContentAlignment": "Center",
					"items": [
						{
							"type": "Image",
							"selectAction": {
								"type": "Action.ToggleVisibility",
								"title": "expand",
								"targetElements": [
									"cardContent3",
									"chevronUp3",
									"chevronDown3"
								]
							},
							"url": "https://adaptivecards.io/content/up.png",
							"width": "20px",
							"altText": "expanded"
						}
					],
					"width": "auto"
				}
			]
		},
		{
			"type": "Container",
			"id": "cardContent3",
			"isVisible": false,
			"items": [
				{
					"type": "Container",
					"items": [
						{
							"type": "Input.Text",
							"id": "comment3",
							"placeholder": "Add your comment here."
						}
					]
				},
				{
					"type": "Container",
					"items": [
						{
							"type": "ColumnSet",
							"columns": [
								{
									"type": "Column",
									"items": [
										{
											"type": "ActionSet",
											"actions": [
												{
													"type": "Action.Submit",
													"title": "Send",
													"data": {
														"id": "_qkQW8dJlUeLVi7ZMEzYVw",
														"action": "comment",
														"lineItem": 3
													}
												}
											]
										}
									],
									"width": "auto"
								}
							]
						}
					]
				}
			]
		},
		{
			"type": "ColumnSet",
			"spacing": "Large",
			"separator": true,
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "Right",
							"text": "Total Expense Amount \t",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"horizontalAlignment": "Right",
							"text": "Non-reimbursable Amount",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"horizontalAlignment": "Right",
							"text": "Advance Amount",
							"wrap": true
						}
					],
					"width": "stretch"
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "404.30"
						},
						{
							"type": "TextBlock",
							"text": "(-) 0.00 \t"
						},
						{
							"type": "TextBlock",
							"text": "(-) 0.00 \t"
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"width": "auto"
				}
			]
		},
		{
			"type": "Container",
			"style": "emphasis",
			"items": [
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"items": [
								{
									"type": "TextBlock",
									"horizontalAlignment": "Right",
									"text": "Amount to be Reimbursed",
									"wrap": true
								}
							],
							"width": "stretch"
						},
						{
							"type": "Column",
							"items": [
								{
									"type": "TextBlock",
									"weight": "Bolder",
									"text": "$ 404.30"
								}
							],
							"width": "auto"
						},
						{
							"type": "Column",
							"width": "auto"
						}
					]
				}
			],
			"bleed": true
		},
		{
			"type": "Container",
			"items": [
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"id": "chevronDown4",
							"selectAction": {
								"type": "Action.ToggleVisibility",
								"title": "show history",
								"targetElements": [
									"cardContent4",
									"chevronUp4",
									"chevronDown4"
								]
							},
							"verticalContentAlignment": "Center",
							"items": [
								{
									"type": "TextBlock",
									"horizontalAlignment": "Right",
									"color": "Accent",
									"text": "Show history",
									"wrap": true
								}
							],
							"width": 1
						},
						{
							"type": "Column",
							"id": "chevronUp4",
							"isVisible": false,
							"selectAction": {
								"type": "Action.ToggleVisibility",
								"title": "hide history",
								"targetElements": [
									"cardContent4",
									"chevronUp4",
									"chevronDown4"
								]
							},
							"verticalContentAlignment": "Center",
							"items": [
								{
									"type": "TextBlock",
									"horizontalAlignment": "Right",
									"color": "Accent",
									"text": "Hide history",
									"wrap": true
								}
							],
							"width": 1
						}
					]
				}
			]
		},
		{
			"type": "Container",
			"id": "cardContent4",
			"isVisible": false,
			"items": [
				{
					"type": "Container",
					"items": [
						{
							"type": "TextBlock",
							"text": "* Expense submitted by **Matt** on Wed, Apr 14th, 2019",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "* Expense approved by **Thomas** on Thu, Apr 15th, 2019",
							"isSubtle": true,
							"wrap": true
						}
					]
				}
			]
		},
		{
			"type": "Container",
			"items": [
				{
					"type": "ActionSet",
					"actions": [
						{
							"type": "Action.Submit",
							"title": "Approve",
							"style": "positive",
							"data": {
								"id": "_qkQW8dJlUeLVi7ZMEzYVw",
								"action": "approve"
							}
						},
						{
							"type": "Action.ShowCard",
							"title": "Reject",
							"style": "destructive",
							"card": {
								"type": "AdaptiveCard",
								"body": [
									{
										"type": "Input.Text",
										"id": "RejectCommentID",
										"placeholder": "Please specify an appropriate reason for rejection.",
										"isMultiline": true
									}
								],
								"actions": [
									{
										"type": "Action.Submit",
										"title": "Send",
										"data": {
											"id": "_qkQW8dJlUeLVi7ZMEzYVw",
											"action": "reject"
										}
									}
								]
							}
						}
					]
				}
			]
		}
	],
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"version": "1.2",
	"fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}
Adaptive Card