Getting Started

An Adaptive Card is a JSON-serialized card object model.

Adaptive Card structure

The basic structure of a card is as follows:

• AdaptiveCard - The root object describes the AdaptiveCard itself, including its element makeup, its actions, how it should be spoken, and the schema version required to render it.
• body - The body of the card is made up of building-blocks known as elements. Elements can be composed in nearly infinite arrangements to create many types of cards.
• actions - Many cards have a set of actions a user may take on it. This property describes those actions which typically get rendered in an "action bar" at the bottom.

Example Card

This sample card which includes a single line of text followed by an image.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Type property

Every element has a type property which identifies what kind of object it is. Looking at the above card, you can see we have two elements, a TextBlock and an Image.

All Adaptive Card elements stack vertically and expand to the width of their parent (think display: block in HTML). However, you can use a ColumnSet to create side-by-side columns of containers.

Adaptive Elements

The most fundamental elements are:

• TextBlock - adds a block of text with properties to control what the text looks like
• Image - adds an image with properties to control what the image looks like

Container elements

Cards can also have containers, which arrange a collection of child elements.

• Container - Defines a a collection of elements
• ColumnSet/Column - Defines a collection of columns, each column is a container
• FactSet - Container of Facts
• ImageSet - Container of Images so that UI can show appropriate photo gallery experience for a collection of images.

Input elements

Input elements allow you to ask for native UI to build simple forms:

• Input.Text - get text content from the user
• Input.Date - get a Date from the user
• Input.Time - get a Time from the user
• Input.Number - get a Number from the user
• Input.ChoiceSet - Give the user a set of choices and have them pick
• Input.Toggle - Give the user a single choice between two items and have them pick

Actions

Actions add buttons to the card. These can perform a variety of actions, like opening a URL or submitting some data.

• Action.OpenUrl - the button opens an external URL for viewing
• Action.ShowCard - Requests a sub-card to be shown to the user.
• Action.Submit - Ask for all of the input elements to be gathered up into an object which is then sent to you through some method defined by the host application.

Example Action.Submit: With Skype, an Action.Submit will send a Bot Framework bot activity back to the bot with the Value property containing an object with all of the input data on it.

Learn More

• Browse Sample cards for inspiration
• Use the Schema Explorer to browse the available elements
• Build a card using the Interactive Visualizer
• Get in touch with any feedback you have