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

Sporting event sample

JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"speak": "The Seattle Seahawks beat the Carolina Panthers 40-7",
	"body": [
		{
			"type": "Container",
			"items": [
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"width": "auto",
							"items": [
								{
									"type": "Image",
									"url": "https://adaptivecards.io/content/cats/3.png",
									"size": "medium"
								},
									{
									"type": "TextBlock",
									"text": "SHADES",
									"horizontalAlignment": "center",
									"weight": "bolder"
								}
							]
						},
						{
							"type": "Column",
							"width": "stretch",
							"separator": true,
							"spacing": "medium",
							"items": [
								{
									"type": "TextBlock",
									"text": "Dec 4",
									"horizontalAlignment": "center"
								},
								{
									"type": "TextBlock",
									"text": "Final",
									"spacing": "none",
									"horizontalAlignment": "center"
								},
								{
									"type": "TextBlock",
									"text": "7 - 40",
									"size": "extraLarge",
									"horizontalAlignment": "center"
								}
							]
						},
						{
							"type": "Column",
							"width": "auto",
							"separator": true,
							"spacing": "medium",
							"items": [
								{
									"type": "Image",
									"url": "https://adaptivecards.io/content/cats/2.png",
									"size": "medium",
									"horizontalAlignment": "center"
								},
								{
									"type": "TextBlock",
									"text": "SKINS",
									"horizontalAlignment": "center",
									"weight": "bolder"
								}
							]
						}
					]
				}
			]
		}
	]
}
Adaptive Card