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

Solitaire sample

JSON 
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "0.5",
	"backgroundImage": "https://download-ssl.msgamestudios.com/content/mgs/ce/production/SolitaireWin10/dev/adapative_card_assets/v1/card_background.png",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": 1,
					"items": [
						{
							"type": "Image",
							"url": "https://download-ssl.msgamestudios.com/content/mgs/ce/production/SolitaireWin10/dev/adapative_card_assets/v1/tile_spider.png",
							"size": "stretch",
							"altText": "Spider cover showing a spider web"
						}
					]
				},
				{
					"type": "Column",
					"width": 1,
					"items": [
						{
							"type": "TextBlock",
							"text": "Click here to play another game of Spider in Microsoft Solitaire Collection!",
							"color": "light",
							"weight": "bolder",
							"wrap": true,
							"size": "default",
							"horizontalAlignment": "center"
						}
					]
				}
			]
		}
	]
}
Data JSON 
{
    "gameImageUrl":"https://download-ssl.msgamestudios.com/content/mgs/ce/production/SolitaireWin10/dev/adapative_card_assets/v1/tile_spider.png",
    "backgroundImageUrl":"https://download-ssl.msgamestudios.com/content/mgs/ce/production/SolitaireWin10/dev/adapative_card_assets/v1/card_background.png",
    "action": {
        "title":"Click here to play another game of Spider in Microsoft Solitaire Collection!"
    }
}
Template JSON 
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "0.5",
    "backgroundImage": "${backgroundImageUrl}",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "Image",
                            "url": "${gameImageUrl}",
                            "size": "Stretch"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${action.title}",
                            "color": "Light",
                            "weight": "Bolder",
                            "wrap": true,
                            "size": "default",
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        }
    ]
}
Adaptive Card