Understanding Adaptive Cards

Understand how Adaptive Cards work

Written By Ben Lehmann

Last updated 5 months ago

Understanding Adaptive Cards

Adaptive Cards are composed using basic card elements and data bindings collected into a simple JSON object. This light-weight format lets applications send layout information and card data back-and-forth without having to worry about how other applications will draw the card: each app works that out for itself from the supplied layout information.

Key concepts for Adaptive Cards

It helps to understand a little about what card elements, JSON, and data bindings actually are if you are not already familiar with them.

Here are some brief descriptions:

Key Concepts

  • Card elements - these are the parts of a card that are displayed: things like text boxes, buttons, and images.

  • Card definition - a JSON string that specifies the layout of your card elements and any data bindings. A card definition is needed for each OneBot card configuration.

  • JSON - a simple way to structure data - using JSON lets us ‘write’ Card Definitions the systems can use, but that are human readable too. The Card Designer will even write the JSON for you so you can focus on creating effective, appealing layouts.

  • Data binding - labels added to card elements that enable the exchange of information. As data is sent back-and-forth between cards and the system, data bindings help by attaching ‘labels’ to elements of the data itself, allowing the system to work with it.

Further information on Adaptive Cards

Further information into these and related topics, as well as a detailed treatment of the inner workings of Adaptive Cards, can be found in the Adaptive Cards Deep Dive article.

We also have a walkthrough for Creating a Basic Adaptive Card using the Card Designer