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

Weather compact sample

JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"speak": "The forecast for Seattle January 20 is mostly clear with a High of 51 degrees and Low of 40 degrees",
	"body": [
		{
			"type": "TextBlock",
			"text": "Seattle, WA",
			"size": "large",
			"isSubtle": true
		},
		{
			"type": "TextBlock",
			"text": "September 18, 7:30 AM",
			"spacing": "none"
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "Image",
							"url": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png",
							"size": "small"
						}
					]
				},
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "TextBlock",
							"text": "42",
							"size": "extraLarge",
							"spacing": "none"
						}
					]
				},
				{
					"type": "Column",
					"width": "stretch",
					"items": [
						{
							"type": "TextBlock",
							"text": "°F",
							"weight": "bolder",
							"spacing": "small"
						}
					]
				},
				{
					"type": "Column",
					"width": "stretch",
					"items": [
						{
							"type": "TextBlock",
							"text": "Hi 51",
							"horizontalAlignment": "left"
						},
						{
							"type": "TextBlock",
							"text": "Lo 40",
							"horizontalAlignment": "left",
							"spacing": "none"
						}
					]
				}
			]
		}
	]
}
Adaptive Card