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 look, once displayed, like 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 (see https://guitaca.com/Blogs/Blog?id=e7e81dfa-994f-7129-959b-2fd62d949842).

The Adaptive Card Viewer is another Visual Studio Code extension (https://marketplace.visualstudio.com/items?itemName=tomlm.vscode-adaptivecards, authored by Tom Laird-McConnell).

It requires that the JSON file starts with a schema property ("$schema": "http://adaptivecards.io/schemas/adaptive-card.json"). 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 file whit the JSON file is in Visual Studio Code, and use the shortcut Ctrl+Shift+V A (thus, click at the same time on Ctrl, Shift, and V, release the keys and click on A) will start the viewer.