Format cards in Teams

You can add rich text formatting to your cards using either Markdown or HTML, depending on the card type.

Cards support formatting in the text property only, not in the title or subtitle properties. Formatting can be specified using a subset of XML (HTML) formatting, or Markdown depending on card type. For current and future development Adaptive cards using Markdown formatting is recommended.

Formatting support differs between different card types, and rendering of the card can differ slightly between the desktop and the mobile Teams clients, as well as Teams in the desktop browser.

You can include an inline image with any Teams card. Images an be formatted as .png, .jpg, or .gif files and must not exceed 1024 ×1024 px or 1 MB. Animated GIF is not officially supported. See Cards reference

Formatting cards with Markdown

There are two card types that support Markdown in Teams:

  • Adaptive Cards: Markdown is supported in Adaptive Card Textblock field, as well as Fact.Title and Fact.Value. HTML is not supported in adaptive cards.
  • O365 Connector Cards: Markdown and limited HTML is supported in Office 365 Connector cards in the text fields.

The supported styles for Textblock, Fact.Title and Fact.Value are:

Style Example Markdown
bold Bold **Bold**
italic Italic _Italic_
unordered list
  • text
  • text
- Item 1\r- Item 2\r- Item 3
ordered list
  1. text
  2. text
1. Green\r2. Orange\r3. Blue
Hyperlinks Bing [Title](url)

The following Markdown tags are not supported:

  • Headers
  • Tables
  • Images
  • Preformatted text
  • Blockquotes

Important

Adaptive cards do not support HTML formatting.

Newlines for Adaptive Cards

In lists you can use the \r or \n escape sequences for newlines. Using \n\n in a list will cause the next element in the list to be indented. If you need newlines elsewhere in the textblock, use \n\n.

Mobile and desktop differences for Adaptive Cards

Formatting is slightly different between the desktop and the mobile versions of Teams.

On the desktop, Adaptive Card Markdown formatting appears like this in both web browsers and in the Teams client application:

Adaptive Card Markdown formatting in the desktop client

On iOS, Adaptive Card Markdown formatting appears like this:

Adaptive Card Markdown formatting in iOS

On Android, Adaptive Card Markdown formatting appears like this:

Adaptive Card Markdown formatting in Android

More information on Adaptive Cards

Text features in Adaptive cards The date and localization features mentioned in this topic are not supported in Teams.

Formatting sample for Adaptive cards

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "This is some **bold** text"
        },
        {
            "type": "TextBlock",
            "text": "This is some _italic_ text"
        },
        {
            "type": "TextBlock",
            "text": "- Bullet \r- List \r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "1. Numbered\r2. List\r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Check out [Adaptive Cards](http://adaptivecards.io)"
        }
    ]
}

Mention support within Adaptive cards v1.2

Card based mentions are supported in Web, Desktop and mobile clients. You can add @ mentions within an adaptive card body for bots and messaging extension responses. To add @ mentions in cards, follow the same notification logic and rendering as that of message based mentions in channel and group chat conversations.

Bots and messaging extensions can include mentions within the card content in TextBlock and FactSet elements.

Note

Media elements are currently not supported in Adaptive cards v1.2 on the Teams platform.

Constructing mentions

To include a mention in an Adaptive Card your app needs to include the following elements

  • <at>username</at> in the supported adaptive card elements
  • The mention object inside of an msteams property in the card content, which includes the Teams user id of the user being mentioned

Sample Adaptive card with a mention

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "text": "Hi <at>John Doe</at>"
      }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0",
    "msteams": {
      "entities": [
        {
          "type": "mention",
          "text": "<at>John Doe</at>",
          "mentioned": {
            "id": "29:123124124124",
            "name": "John Doe"
          }
        }
      ]
    }
  }
}

Formatting cards with HTML

Connector cards support limited Markdown and HTML formatting. Markdown is described in the next section.

Style Example HTML
bold text <strong>text</strong>
italic text <em>text</em>
header (levels 1–3) Text <h3>Text</h3>
strikethrough text <strike>text</strike>
unordered list
  • text
  • text
<ul><li>text</li><li>text</li></ul>
ordered list
  1. text
  2. text
<ol><li>text</li><li>text</li></ol>
preformatted text text <pre>text</pre>
blockquote
text
<blockquote>text</blockquote>
hyperlink Bing <a href="https://www.bing.com/">Bing</a>
image link Duck on a rock <img src="http://aka.ms/Fo983c" alt="Duck on a rock"></img>

In connector cards, newlines are rendered in HTML using the <p> tag.

Mobile and desktop differences for connector cards using HTML

On the desktop, HTML formatting for connector cards looks like this:

HTML formatting for connector cards in the Desktop client

On iOS, HTML formatting looks like this:

HTML formatting for connector cards  in the iOS client

Issues:

  • Inline images are not rendered on iOS using either Markdown or HTML in Connector Cards.
  • Preformatted text is rendered but does not have a gray background.

On Android, HTML formatting looks like this:

HTML formatting for connector cards in the Android client

Formatting sample for HTML Connector Cards

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "http://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card HTML formatting",
    "sections": [
        {
            "text": "This is some <strong>bold</strong> text"
        },
        {
            "text": "This is some <em>italic</em> text"
        },
        {
            "text": "This is some <strike>strikethrough</strike> text"
        },
        {
            "text": "<h1>Header 1</h1>\r<h2>Header 2</h2>\r <h3>Header 3</h3>"
        },
        {
            "text": "bullet list <ul><li>text</li><li>text</li></ul>"
        },
        {
            "text": "ordered list <ol><li>text</li><li>text</li></ol>"
        },
        {
            "text": "hyperlink <a href=\"https://www.bing.com/\">Bing</a>"
        },
        {
            "text": "embedded image <img src=\"http://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img>"
        },
        {
            "text": "preformatted text <pre>text</pre>"
        },
        {
            "text": "Paragraphs <p>Line a</p><p>Line b</p>"
        },
        {
            "text": "<blockquote>Blockquote text</blockquote>"
        }
     ]
  }
}