Write your card once in JSON. It renders natively across Teams, Outlook, Cortana, and more — inheriting each platform's look and feel automatically.
Edit the JSON on the left and see your Adaptive Card render live on the right. Switch between templates to explore different layouts.
Build once. Ship to every Microsoft surface — and beyond — without touching platform-specific code.
Cards inherit the host app's visual language automatically. No custom theming code required — Teams cards look like Teams, Outlook cards look like Outlook.
Content is delivered as declarative JSON — no raw markup or scripting. Host apps control rendering and interactivity, eliminating injection risks.
Input controls, action buttons, submit handlers, and deep links — all expressed declaratively without writing event handlers or platform-specific logic.
Separate layout from data with the Adaptive Cards Template Language. Bind dynamic data at runtime using the ${expression} syntax.
Embed the full card designer directly in your own application using the JavaScript SDK. Give users a no-code card authoring experience.
The schema is fully open, versioned, and public. Third-party platforms can implement Adaptive Cards rendering — the ecosystem grows beyond Microsoft.
Every Adaptive Card element, its properties, and how to use them.
See how Adaptive Cards power real workflows across Microsoft's suite of applications.
Every card is a JSON object. Start with the required fields and build up from there.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"text": "Hello, Adaptive Cards! 👋",
"size": "Large",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "This card renders natively on every supported platform.",
"wrap": true,
"color": "Accent"
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Learn More",
"url": "https://adaptivecards.microsoft.com"
}
]
}