Adaptive Cards are an open format that enables developers to create content for user interfaces. Cards are used in messages, bots, emails, and any kind of application that needs to show information for users. Adaptive Cards control the colors, fonts, specific parts of the layout, buttons’ shapes, backgrounds, and other elements that make the Card to look, once displayed, as another piece of the user interface.

Adaptive Cards are used in messages, bots, emails, and any kind of application that needs to show information for users. Currently, Adaptive Cards can be used (for Microsoft technologies) in the Bot Framework, Outlook, Teams, Cortana, the Windows Timeline, and Windows Notifications. They use JSON to define the content of the cards.

To create and preview Adaptive Cards you can use Visual Studio Code with the extension Adaptive Card Studio (https://marketplace.visualstudio.com/items?itemName=madewithcardsio.adaptivecardsstudiobeta). The extension is open-sourced and available on the GitHub site https://github.com/MadeWithCards/AdaptiveCardsStudio. Install the extension in Visual Studio Code:

Create a JSON file with the card code and save it locally on the developer's computer. In this article, we are using the Expense Approval example published on the site https://amdesigner.azurewebsites.net. Then, open the folder where the JSON file is in Visual Studio Code. The button Adaptive Cards in the left-side menu will show all the cards found in the folder.

The Template button shows the source code and a preview of the card.

There is an Accounts - Sign in requested button in the left-side menu, and the option Sign in to use Adaptive Card Studio to sign into an Office 365 account, but it seems to have no function in the current version of the extension.