Edit

Share via

Cards

  • Article

A card is a user interface (UI) container for short or related pieces of information. Cards can have multiple properties and attachments and can include buttons, which trigger card actions. Using cards, you can organize information into groups and give users the opportunity to interact with specific parts of the information.

The bots for Microsoft Teams support the following types of cards:

  • Adaptive Card
  • Hero card
  • List card
  • Connector card for Microsoft 365 Groups
  • Receipt card
  • Sign in card
  • Thumbnail card
  • Card collections
  • Overflow menu on Adaptive Cards

You can add rich text formatting to your cards using either Markdown or HTML, depending on the card type. Cards used by bots and message extensions in Teams, add and respond to these card actions, openUrl, messageBack, imBack, invoke, and signin.

Teams uses cards in three different places:

  • Connectors
  • Bots
  • Message extensions

Cards in connectors

Cards were first defined as part of Outlook and Microsoft 365 and are now used as part of connectors for Microsoft 365 Groups. Like many Microsoft 365 applications, Teams supports connectors. For more information, see create connectors for Microsoft 365 Groups. You can find the specification for cards in connectors in actionable message card reference.

Cards in bots

The Microsoft Bot Framework extends the cards specification by adding a set of predefined cards that bots can use as part of bot messages. Teams supports bots using the Bot Framework, but it supports a different set of these cards. General information on cards in Bot Framework can be found in add rich card attachments to messages. These cards are called simple cards in Teams.

Bots in Teams can use simple cards, connector cards, or Adaptive Cards. Types of cards provides information on cards, supported by bots in Teams.

Cards in message extensions

Message extensions can also return a card. Message extensions can use simple cards, connector cards, or Adaptive Cards. These cards are found in types of cards.

Types of cards

All cards used by Teams are listed in types of cards. This reference also describes differences between Bot Framework cards and cards in Teams.

Adaptive Cards

Adaptive Cards are a new cross product specification for cards in Microsoft products including bots, Cortana, Outlook, and Windows. They're the recommended card type for new Teams development. For general information from the Adaptive Cards team, see Adaptive Cards overview. You can use Adaptive Cards anywhere you use existing hero cards, Microsoft 365 cards, and thumbnail cards.

In addition to Adaptive Cards, Teams supports two other types of cards:

  • Connector cards: Used as part of connectors for Microsoft 365 Groups.
  • Simple cards: Used from the Bot Framework, such as the thumbnail and hero cards.

People Picker in Adaptive Cards

People Picker added as an input control in Adaptive Cards enable search and selection of people. You can use it in chats, channels, dialogs (referred as task modules in TeamsJS v1.x), and tabs. The mobile and desktop clients support People Picker, which provides an inline typing experience.

People icon in an Adaptive Card

People icon in an Adaptive Card helps users to view the images of users in the Adaptive Card in Teams. You can view the image of a single user or multiple users. People icon is supported in Teams mobile and desktop clients.

Typeahead search in Adaptive Cards

Typeahead search added as an input control in Adaptive Cards enable dynamic search experience from a dynamically loaded dataset. It also allows users to do a typeahead static search within a list with limited number of choices. The mobile and desktop clients support typeahead dynamic search experience.

Dependent inputs in Adaptive Cards

You can design Adaptive Cards in Teams where the value of an input depends on the value of another. For example, consider an Adaptive Card with two Input.ChoiceSet dropdowns: one for selecting a country and another for selecting a specific city within that country. The first dropdown must filter the cities displayed in the second dropdown. This can be achieved by creating an Input.ChoiceSet dropdown with dynamic typeahead search that depends on one or more other inputs in the card. For more information, see dependent inputs.

Media elements in Adaptive Cards

Media elements in Adaptive Card provide enhanced media experience and increases engagement with the Adaptive Card. You can add media files such as audio or video clips, YouTube, Vimeo, or Dailymotion videos to your Adaptive Card. For more information, see Media elements in Adaptive Card.

Adaptive Cards and Incoming Webhooks

Note

Adaptive Cards with Incoming Webhooks enable you to use the rich and flexible capabilities of Adaptive Cards. It sends data using Incoming Webhooks in Teams from their web service.

CodeBlock in Adaptive Cards

Share code snippets as richly formatted Adaptive Cards in Teams chats, channels, and meetings with the CodeBlock element. Adaptive Cards with the CodeBlock element make the code snippet easy to read as the indentation, numbering, and syntax highlighting match the programming language. For more information, see CodeBlock in Adaptive Cards.

Adaptive Card responsive layout

You must design your Adaptive Cards to look great on any device to provide an enhanced user experience across chat, channels, and meeting chat. Adaptive Card responsive layout helps you to design cards with different layouts that target different card widths. For more information, see Adaptive Card responsive layout.

Borders and rounded corners

You can add borders to the Container, ColumnSet, Column, and Table elements in Adaptive Cards to delineate different sections of the card. You can add rounded corners to the Container, ColumnSet, Column, Table, and Image elements in Adaptive Cards to make the card design look modern and visually appealing. For more information, see borders and rounded corners in Adaptive Cards.

Scrollable containers

A container with many elements might lead to a long, unreadable card. Use the maxHeight property to define the maximum height of the container. When the container has a maximum height and its content exceeds that height, a vertical scrollbar appears. For more information, see scrollable containers in Adaptive Cards.

Compound button

Compound button is a special type of button with an icon, title, and description. You can add a Compound button using the CompoundButton element. This element enables you to replicate the appearance of prompt starters in an Adaptive Card. For more information, see Compound button in Adaptive Cards.

Fluent icons

Adaptive Cards support adding icons from the Fluent icon library using the Icon element. For more information, see icons in Adaptive Card.

Star ratings

You can add a star rating input to your Adaptive Card using the Input.Rating element. You can also include a read-only star rating using the Rating element. For more information, see ratings in Adaptive Cards.

Conditional enablement of action buttons

You can use the conditionallyEnabled property to disable action buttons until the user changes the value of at least one of the required inputs. This property can only be used with Action.Submit and Action.Execute actions. For more information, see conditional enablement of action buttons.

Overflow menu on Adaptive Cards

Adaptive Card in Teams supports overflow menu. You can populate an overflow menu for all the secondary actions in an Adaptive Card.

Support for Microsoft Entra Object ID and UPN in user mention

Bots with Adaptive Cards support user mention IDs, such as Microsoft Entra Object ID and User Principle Name (UPN) in addition to the existing IDs. Incoming Webhooks start to support user mention in Adaptive Card with the Microsoft Entra Object ID and UPN.

Charts in Adaptive Cards

You can visually represent data through charts in Adaptive Cards. You can use charts for performance dashboards, budget allocations, project management, customer insights, and more. For more information, see charts in Adaptive Cards.

Container layouts in Adaptive Cards

You can design responsive containers for different Adaptive Card widths with the Layout.Stack, Layout.Flow, and Layout.AreaGrid layouts. For more information, see Container layouts.

Next step

Types of cards

See also