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

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 January 20 is mostly clear with a High of 51 degrees and Low of 40 degrees",
    "body": [
        {
            "type": "TextBlock",
            "text": "${name}, WA",
            "size": "Large",
            "isSubtle": true
        },
        {
            "type": "TextBlock",
            "text": "{{DATE(${formatDateTime(dt, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}} {{TIME(${formatDateTime(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": "${((main.temp * 100 - 27315) * 1.8 + 3200) / 100}",
                            "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 ${((main.temp_max * 1000 - 273150) * 1.8 + 32000) / 1000}",
                            "horizontalAlignment": "Left"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Lo ${((main.temp_min * 1000 - 273150) * 1.8 + 32000) / 1000} ",
                            "horizontalAlignment": "Left",
                            "spacing": "None"
                        }
                    ]
                }
            ]
        }
    ]
}
Adaptive Card