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

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",
									"altText": "Shades cat team emblem"
								},
									{
									"type": "TextBlock",
									"text": "SHADES",
									"horizontalAlignment": "center",
									"weight": "bolder"
								}
							]
						},
						{
							"type": "Column",
							"width": "stretch",
							"separator": true,
							"spacing": "medium",
							"items": [
								{
									"type": "TextBlock",
									"text": "Sat, Aug 31, 2019",
									"horizontalAlignment": "center",
									"wrap": true
								},
								{
									"type": "TextBlock",
									"text": "Final",
									"spacing": "none",
									"horizontalAlignment": "center"
								},
								{
									"type": "TextBlock",
									"text": "45 - 7",
									"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",
									"altText": "Skins cat team emblem"
								},
								{
									"type": "TextBlock",
									"text": "SKINS",
									"horizontalAlignment": "center",
									"weight": "bolder"
								}
							]
						}
					]
				}
			]
		}
	]
}
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