Card formatting

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 amd 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.

Card types

There are three types of cards 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.
  • Simple Cards: Limited HTML is supported, but markdown is not supported in simple cards.

Markdown formatting for Adaptive Cards

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

Adaptive cards do not support any 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

For 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)"
        }
    ]
}

HTML formatting for Connector Cards

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>"
        }
     ]
  }
}

Markdown formatting for Connector Cards

Connector cards support limited markdown and HTML formatting. HTML is described in the last section.

Style Example Markdown
bold text **text**
italic text *text*
header (levels 1–3) Text ### Text
strikethrough text ~~text~~
unordered list
  • text
  • text
- Item 1\r- Item 2\r- Item 3
ordered list
  1. text
  2. text
1. Green\r2. Orange\r3. Blue
preformatted text text preformatted text
blockquote >blockquote text >blockquote text
hyperlink Bing [Bing](https://www.bing.com/)
image link Duck on a rock ![Duck](https://aka.ms/Fo983c)

In connector cards, newlines are rendered for \n\n, but not for \n or \r.

Mobile and desktop differences for connector cards using markdown

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

HTML formatting for connector cards in the Desktop client

On iOS, markdown formatting for connector cards looks like this:

HTML formatting for connector cards in the iOS client

Issues:

  • The iOS client for Teams does not render markdown or HTML inline images in Connector Cards.
  • Blockquotes are rendered as indented but without a gray background.

On Android, markdown formatting for connector cards looks like this:

HTML formatting for connector cards in the Android client

Formatting example for markdown Connector Cards

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "http://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card Markdown formatting",
    "sections": [
        {
            "text": "This is some **bold** text"
        },
        {
            "text": "This is some _italic_ text"
        },
        {
            "text": "# Header 1\r## Header 2\r### Header 3"
        },
        {
            "text": "- Bullet \r- List \r"
        },
        {
            "text": "1. Numbered\r1. List \r"
        },
        {
            "text": "Link: [Bing](https://www.bing.com)"
        },
        {
            "text": "embedded image link: ![Duck on a rock](http://aka.ms/Fo983c)"
        },
        {
            "text": "`preformatted text`"
        },
        {
            "text": "Newlines (backslash n, backslash n):\n\nline a\n\nline b\n\nline c"
        },
        {
            "text": ">This is a blockquote"
        }
     ]
  }
}

HTML Formatting for simple cards

These HTML tags are supported for simple cards such as the hero and thumbnail card. Markdown is not supported.

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>

Mobile and desktop differences for simple cards

Because of resolution differences between the desktop and mobile platform, formatting is different between the desktop and the mobile version of Teams.

On the desktop, HTML formatting appears like this:

HTML formatting in the Desktop client

On iOS, HTML formatting appears like this:

HTML formatting in the iOS client

Issues:

  • Character formatting like bold and italic are not rendered on iOS.

On Android, HTML formatting appears like this:

HTML formatting in the Android client

Character formatting like bold and italic display correctly on Android.

Formatting sample for HTML formatting in simple cards

These screenshots were created using Teams AppStudio, where the text property of a hero card was set to the following string. You can test formatting in your own cards by modifying this code.

<p>bold: <strong>Bold Text</strong></p><p>italic: <em>Italic Text</em></p><p>strikethrough: <strike>Strikethrough text</strike></p><h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3><p>bullet list: <ul><li>text</li><li>text</li></ul></p><p>ordered list: <ol><li>text</li><li>text</li></ol></p><pre>preformatted text</pre><blockquote>blockquote text</blockquote></p><p>hyperlink: <a href=\"https://www.bing.com/\">Bing</a></p><p>embedded image: <img src=\"http://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img></p>