Samples

These samples are just a teaser of the type of cards you can create. Go ahead and tweak them to make any scenario possible!

Flight details

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Container",
                            "backgroundImage": "http://messagecardplayground.azurewebsites.net/assets/TxP_Background.png",
                            "items": [
                                {
                                    "type": "Image",
                                    "horizontalAlignment": "Center",
                                    "url": "http://messagecardplayground.azurewebsites.net/assets/TxP_Flight.png"
                                }
                            ],
                            "bleed": true
                        },
                        {
                            "type": "Container",
                            "spacing": "None",
                            "style": "emphasis",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "size": "ExtraLarge",
                                    "weight": "Lighter",
                                    "color": "Accent",
                                    "text": "Flight to Paris",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "spacing": "Small",
                                    "text": "Delta Air Lines flight 8471",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "spacing": "None",
                                    "text": "Confirmation code: ABCDEF",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "spacing": "None",
                                    "text": "10 hours 45 minutes",
                                    "wrap": true
                                }
                            ],
                            "bleed": true,
                            "height": "stretch"
                        }
                    ],
                    "width": 45,
                    "height": "stretch"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Container",
                            "height": "stretch",
                            "items": [
                                {
                                    "type": "ColumnSet",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "size": "ExtraLarge",
                                                    "weight": "Lighter",
                                                    "text": "BLR"
                                                }
                                            ],
                                            "width": "auto"
                                        },
                                        {
                                            "type": "Column",
                                            "verticalContentAlignment": "Center",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "url": "http://messagecardplayground.azurewebsites.net/assets/graydot2x2.png",
                                                    "width": "10000px",
                                                    "height": "2px"
                                                }
                                            ],
                                            "width": "stretch"
                                        },
                                        {
                                            "type": "Column",
                                            "spacing": "Small",
                                            "verticalContentAlignment": "Center",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane.png",
                                                    "height": "16px"
                                                }
                                            ],
                                            "width": "auto"
                                        },
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "horizontalAlignment": "Right",
                                                    "size": "ExtraLarge",
                                                    "weight": "Lighter",
                                                    "text": "CDG"
                                                }
                                            ],
                                            "width": "auto"
                                        }
                                    ]
                                },
                                {
                                    "type": "ColumnSet",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "size": "Medium",
                                                    "text": "1:55 AM"
                                                }
                                            ],
                                            "width": 1
                                        },
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "horizontalAlignment": "Right",
                                                    "size": "Medium",
                                                    "text": "8:10 AM"
                                                }
                                            ],
                                            "width": 1
                                        }
                                    ]
                                },
                                {
                                    "type": "ColumnSet",
                                    "spacing": "None",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "November 12, 2017",
                                                    "isSubtle": true,
                                                    "wrap": true
                                                }
                                            ],
                                            "width": 1
                                        },
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "horizontalAlignment": "Right",
                                                    "text": "November 12, 2017",
                                                    "isSubtle": true,
                                                    "wrap": true
                                                }
                                            ],
                                            "width": 1
                                        }
                                    ]
                                },
                                {
                                    "type": "ColumnSet",
                                    "spacing": "None",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "Bengaluru",
                                                    "isSubtle": true
                                                }
                                            ],
                                            "width": 1
                                        },
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "horizontalAlignment": "Right",
                                                    "text": "Paris",
                                                    "isSubtle": true
                                                }
                                            ],
                                            "width": 1
                                        }
                                    ],
                                    "height": "stretch"
                                },
                                {
                                    "type": "ActionSet",
                                    "separator": true,
                                    "actions": [
                                        {
                                            "type": "Action.Submit",
                                            "title": "Check in",
                                            "style": "positive"
                                        },
                                        {
                                            "type": "Action.Submit",
                                            "title": "View in calendar"
                                        }
                                    ],
                                    "spacing": "Medium"
                                }
                            ]
                        }
                    ],
                    "width": 55
                }
            ],
            "height": "stretch"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}
{ "type": "AdaptiveCard", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "Container", "backgroundImage": "http://messagecardplayground.azurewebsites.net/assets/TxP_Background.png", "items": [ { "type": "Image", "horizontalAlignment": "Center", "url": "http://messagecardplayground.azurewebsites.net/assets/TxP_Flight.png" } ], "bleed": true }, { "type": "Container", "spacing": "None", "style": "emphasis", "items": [ { "type": "TextBlock", "size": "ExtraLarge", "weight": "Lighter", "color": "Accent", "text": "Flight to Paris", "wrap": true }, { "type": "TextBlock", "spacing": "Small", "text": "Delta Air Lines flight 8471", "wrap": true }, { "type": "TextBlock", "spacing": "None", "text": "Confirmation code: ABCDEF", "wrap": true }, { "type": "TextBlock", "spacing": "None", "text": "10 hours 45 minutes", "wrap": true } ], "bleed": true, "height": "stretch" } ], "width": 45, "height": "stretch" }, { "type": "Column", "items": [ { "type": "Container", "height": "stretch", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "size": "ExtraLarge", "weight": "Lighter", "text": "BLR" } ], "width": "auto" }, { "type": "Column", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "url": "http://messagecardplayground.azurewebsites.net/assets/graydot2x2.png", "width": "10000px", "height": "2px" } ], "width": "stretch" }, { "type": "Column", "spacing": "Small", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane.png", "height": "16px" } ], "width": "auto" }, { "type": "Column", "items": [ { "type": "TextBlock", "horizontalAlignment": "Right", "size": "ExtraLarge", "weight": "Lighter", "text": "CDG" } ], "width": "auto" } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "size": "Medium", "text": "1:55 AM" } ], "width": 1 }, { "type": "Column", "items": [ { "type": "TextBlock", "horizontalAlignment": "Right", "size": "Medium", "text": "8:10 AM" } ], "width": 1 } ] }, { "type": "ColumnSet", "spacing": "None", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "text": "November 12, 2017", "isSubtle": true, "wrap": true } ], "width": 1 }, { "type": "Column", "items": [ { "type": "TextBlock", "horizontalAlignment": "Right", "text": "November 12, 2017", "isSubtle": true, "wrap": true } ], "width": 1 } ] }, { "type": "ColumnSet", "spacing": "None", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "text": "Bengaluru", "isSubtle": true } ], "width": 1 }, { "type": "Column", "items": [ { "type": "TextBlock", "horizontalAlignment": "Right", "text": "Paris", "isSubtle": true } ], "width": 1 } ], "height": "stretch" }, { "type": "ActionSet", "separator": true, "actions": [ { "type": "Action.Submit", "title": "Check in", "style": "positive" }, { "type": "Action.Submit", "title": "View in calendar" } ], "spacing": "Medium" } ] } ], "width": 55 } ], "height": "stretch" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.0" }
Try it Yourself »