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 sample
{
"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"
}