Adaptive Cards
Integrate Adaptive Cards in your organization's existing applications and future solutions
Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange.
When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings. They help design and integrate light-weight UI for all major platforms and frameworks.
-
Scenarios
What could you use Adaptive Cards for?
Notify users
Particularly if you provide an interactive card for users to take additional information.
Collect feedback
Feedback scenarios like polls and surveys.
Interactions
Interactions that can be resolved in a single request/response cycle, where the results are useful for multiple members of the conversation.
Social/fun bots
Get an awesome cat image, randomly pick a winner, etc.
One-to-one chat
Enable incredibly diverse workloads. Q&A bots, bots that initiate workflows in other systems, bots that tell jokes, and bots that take notes are just a few examples.
-
Samples
Sample bots for Microsoft Teams
Samples and Templates
These samples are just a teaser of the type of cards you can create. Go ahead and tweak them to make any scenario possible!
Activity Update Sample
Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation
Calendar Reminder Sample
Display a message to remind someone of an calendar appointment
Flight Itinerary Sample
Display a list of flights, passengers, and other related information used in a flight booking application
Flight Update Sample
Display a list of flights, flight status, and passengers.
Food Order Sample
This is an example restaurant that serves American cuisine.
Image Gallery Sample
Showing the obligatory cat photos gallery.
Input Form Sample
Demonstrates how to create a form using Adaptive Cards.
Inputs Sample
Shows how to use every type of form input in Adaptive Cards.
Restaurant Sample
Adaptive Cards are on the menu tonight.
Sporting Event Sample
Stay up-to-date on your favorite sporting event using Adaptive Cards.
Stock Update Sample
Keep track of how your stocks are doing with this Adaptive Card template.
Weather Sample (Compact)
Use an Adaptive Card to display the weather in a compact card format.
Weather Sample (Large)
Use an Adaptive Card to display the weather in a large card format.
Product Video Sample
Adaptive Cards can display embedded multimedia assets. Find out how using this sample template.
Agenda Sample
Adaptive Cards can display embedded multimedia assets. Find out how using this sample template.
Expense Report Sample
Demonstrates how to use Adaptive Cards for an expense approval application.
Flight Details Sample
An example of showing in-context flight information using Adaptive Cards.
Simple Fallback Sample
Here is an example of how to use a simple fallback template when calls to underlying APIs go wrong.
Activity Update with Labels
The default activity update sample using labels.
Calendar Reminder with Labels
The calendar reminder sample using labels.
Expense Report with Labels Sample
The expense report sample, but using labels.
Food Order with Validation Sample
Demonstrates how to use input validation in Adaptive Cards.
Input Forms with Labels
Demonstrates how to use input forms with labels
Input Forms with Validation
Demonstrates how to use input forms with validation in Adaptive Cards.
Show Card Wizard Sample
Create a wizard-like user interface using Adaptive Cards.
-
Documentation
Get started with Adaptive Cards
Adaptive Cards Overview
Adaptive Cards are an open card exchange format enabling developers to exchange UI content in a common and consistent way.
Getting Started Authoring Adaptive Cards
An Adaptive Card is a JSON-serialized card object model.
Adaptive Cards for Bot Developers
Adaptive Cards are a great fit for Bots. They let you author a card once and have it render beautifully inside multiple apps, like Microsoft Teams, your own website, and more.
Adaptive Cards for Outlook Actionable Message Developers
Whether you are filling out a survey, approving an expense report, or updating a CRM sales opportunity, Actionable Messages enable you to take quick actions right from within Outlook. Developers can now embed Adaptive Cards in their emails or notifications, elevating user engagement with their services and increasing organizational productivity.
Adaptive Cards Designer
Use an interactive, web-based tool to create your Adaptive Card templates.