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!

Important note about accessibility: In version 1.3 of the schema we introduced a label property on Inputs to improve accessibility. If the Host app you are targetting supports v1.3 you should use label intead of a TextBlock as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.

Choose sample:

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. Note: The binding syntax changed in May 2020. Get started with 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": "Redmond, WA",
			"size": "large",
			"isSubtle": true
		},
		{
			"type": "TextBlock",
			"text": "Mon, Nov 4, 2019 6:21 PM",
			"spacing": "none"
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "Image",
							"url": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png",
							"size": "small",
							"altText": "Mostly cloudy weather"
						}
					]
				},
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "TextBlock",
							"text": "46",
							"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 50",
							"horizontalAlignment": "left"
						},
						{
							"type": "TextBlock",
							"text": "Lo 41",
							"horizontalAlignment": "left",
							"spacing": "none"
						}
					]
				}
			]
		}
	]
}
Data JSON 
{
    "coord":{
        "lon":-122.12,
        "lat":47.67
    },
    "weather":[
        {
            "id":802,
            "main":"Clouds",
            "description":"scattered clouds",
            "icon":"03n"
        }
    ],
    "base":"stations",
    "main":
    {
        "temp":281.05,
        "pressure":1022,
        "humidity":81,
        "temp_min":278.15,
        "temp_max":283.15
    },
    "visibility":16093,
    "wind":
    {
        "speed":4.1,
        "deg":360
    },
    "rain":{},
    "clouds": {
        "all":40
    },
    "dt":1572920478,
    "sys":{
        "type":1,
        "id":5798,
        "country":"US",
        "sunrise":1572879421,
        "sunset":1572914822
    },
    "timezone":-28800,
    "id":5808079,
    "name":"Redmond",
    "cod":200
}
Template JSON 
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "speak": "The forecast for Seattle ${formatEpoch(dt, 'MMMM d')} is mostly clear with a High of ${formatNumber((main.temp_max - 273) * 9 / 5 + 32, 0)} degrees and Low of ${formatNumber((main.temp_min - 273) * 9 / 5 + 32, 0)} degrees",
    "body": [
        {
            "type": "TextBlock",
            "text": "${name}, WA",
            "size": "Large",
            "isSubtle": true
        },
        {
            "type": "TextBlock",
            "text": "{{DATE(${formatEpoch(dt, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}} {{TIME(${formatEpoch(dt, 'yyyy-MM-ddTHH:mm:ssZ')})}}",
            "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": "${formatNumber((main.temp - 273) * 9 / 5 + 32, 0)}",
                            "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 ${formatNumber((main.temp_max - 273) * 9 / 5 + 32, 0)}",
                            "horizontalAlignment": "Left"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Lo ${formatNumber((main.temp_min - 273) * 9 / 5 + 32, 0)}",
                            "horizontalAlignment": "Left",
                            "spacing": "None"
                        }
                    ]
                }
            ]
        }
    ]
}
Adaptive Card