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

Data JSON 
{
	"id": 401117857,
	"season": 2019,
	"week": 1,
	"season_type": "regular",
	"start_date": "2019-08-31T19:30:00Z",
	"neutral_site": false,
	"conference_game": false,
	"attendance": null,
	"venue_id": 3852,
	"venue": "Navy-Marine Corps Memorial Stadium",
	"home_team": "Navy",
	"home_conference": "American Athletic",
	"home_points": 45,
	"home_line_scores": [
		10,
		14,
		14,
		7
	],
	"away_team": "Holy Cross",
	"away_conference": null,
	"away_points": 7,
	"away_line_scores": [
		0,
		7,
		0,
		0
	]
}
Template 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": "{{DATE(${string(start_date)}, SHORT)}}",
                                    "horizontalAlignment": "Center"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Final",
                                    "spacing": "None",
                                    "horizontalAlignment": "Center"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "${home_points} - ${away_points}",
                                    "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