Adaptive Cards are a platform-agnostic card format developed by Microsoft. They allow you to author content once and have it render appropriately in Microsoft Teams, Outlook Actionable Messages, Power Automate flows, Azure Bot Framework, and other host applications. The card is defined as JSON and the host application handles the rendering according to its own design language.
Why Adaptive Cards
Before Adaptive Cards, developers who wanted to send rich formatted messages to Teams or Outlook had to use platform-specific HTML or proprietary message formats. Adaptive Cards standardize the authoring experience. You write one card definition and it renders correctly in every supported host, whether that is the desktop Teams client, the mobile app, or Outlook.
For Power Platform developers, Adaptive Cards are the primary way to build approval interfaces, data collection forms, and rich notification messages inside Power Automate flows.
The Card Structure
An Adaptive Card is a JSON object with a type of AdaptiveCard, a version number, and a body array containing the card elements.
Body elements include TextBlock (for text with configurable size, weight, and color), Image (displays an image), ColumnSet (creates a row of columns), FactSet (displays a table of label-value pairs), InputText (for text input), InputChoiceSet (for dropdown or radio button selection), and ActionSet (for buttons).
Actions defined in the actions array allow users to interact with the card. Actions include Action.Submit (sends input data back to the bot or flow), Action.OpenUrl (opens a URL), and Action.ShowCard (expands a sub-card inline).
Designing Cards Visually
The Microsoft Adaptive Cards Designer at adaptivecards.io is the official visual design tool. The DevHexLab Adaptive Cards Designer at /tools/developer/adaptive-cards-designer provides a similar experience with instant preview and JSON output, useful when you are working within the DevHexLab environment or want a quick standalone designer.
Paste an existing card JSON payload to preview and edit it, or build from scratch by adding elements from the palette.
Using Adaptive Cards in Power Automate
In a Power Automate flow, use the Post an Adaptive Card and wait for a response action (in the Teams connector) to send a card and capture the user's response. The card JSON goes in the card parameter. The selected options and input field values are returned when the user submits the card.
Frequently Asked Questions
Can Adaptive Cards execute JavaScript?
No. Adaptive Cards are deliberately sandboxed. They cannot run JavaScript. All interactivity is through the defined Action types (submit, open URL, show card). This makes them safe to render in any host application.
What version of Adaptive Cards should I use?
Version 1.5 is widely supported across Teams, Outlook, and Power Automate. Features from newer versions may not render correctly in all host applications. Check the host application's support table on the Adaptive Cards documentation site.
Can I use Adaptive Cards in custom applications?
Yes. The Adaptive Cards SDK for JavaScript, .NET, iOS, and Android allows you to render cards in your own applications using the same JSON payload format.
Design the card once, deploy it everywhere.