TextBlock

The TextBlock Item allows for the inclusion of text, with various font sizes, weight and color, in Adaptive Cards.

Property Type Required Description
color string No Controls the color of TextBlock Items.
horizontalAlignment string No Controls how Items are horizontally positioned within their container.
isSubtle boolean No Indicates whether the color of the text should be slightly toned down to appear less prominent
maxLines number No When Wrap is true, you can specify the maximum number of lines to allow the textBlock to use.
size string No controls size of the text.
text string Yes The actual text to display
type "TextBlock" No Must be TextBlock
weight string No Controls the weight of TextBlock Items
wrap boolean No True if be is allowed to wrap
id string No A unique Id associated with the element
spacing string No Controls the amount of spacing between this element and the previous element.
separator boolean No, default: false The Separator object type describes the look and feel of a separation line between two elements.

Example

{
    "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "This is some text",
            "size": "large"
        },
        {
            "type": "TextBlock",
            "text": "It doesn't wrap by default",
            "weight": "bolder"
        },
        {
            "type": "TextBlock",
            "text": "So set **wrap** to true if you plan on showing a paragraph of text",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "You can also use **maxLines** to prevent it from getting out of hand",
            "wrap": true,
            "maxLines": 2
        },
        {
            "type": "TextBlock",
            "text": "You can even draw attention to certain text with color",
            "wrap": true,
            "color": "attention"
        }
    ]
}
{ "$schema":"http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "This is some text", "size": "large" }, { "type": "TextBlock", "text": "It doesn't wrap by default", "weight": "bolder" }, { "type": "TextBlock", "text": "So set **wrap** to true if you plan on showing a paragraph of text", "wrap": true }, { "type": "TextBlock", "text": "You can also use **maxLines** to prevent it from getting out of hand", "wrap": true, "maxLines": 2 }, { "type": "TextBlock", "text": "You can even draw attention to certain text with color", "wrap": true, "color": "attention" } ] }
Try it Yourself »

Properties

color

Controls the color of TextBlock Items.

  • Type: string
  • Required: No
  • Allowed values:
    • "default"
    • "dark"
    • "light"
    • "accent"
    • "good"
    • "warning"
    • "attention"

Example

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "color: default",
            "color": "default"
        },
        {
            "type": "TextBlock",
            "text": "color: accent",
            "color": "accent"
        },
        {
            "type": "TextBlock",
            "text": "color: good",
            "color": "good"
        },
        {
            "type": "TextBlock",
            "text": "color: warning",
            "color": "warning"
        },
        {
            "type": "TextBlock",
            "text": "color: attention",
            "color": "attention"
        },
        {
            "type": "TextBlock",
            "text": "color: light",
            "color": "light"
        },
        {
            "type": "TextBlock",
            "text": "color: dark",
            "color": "dark"
        }
    ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "color: default", "color": "default" }, { "type": "TextBlock", "text": "color: accent", "color": "accent" }, { "type": "TextBlock", "text": "color: good", "color": "good" }, { "type": "TextBlock", "text": "color: warning", "color": "warning" }, { "type": "TextBlock", "text": "color: attention", "color": "attention" }, { "type": "TextBlock", "text": "color: light", "color": "light" }, { "type": "TextBlock", "text": "color: dark", "color": "dark" } ] }
Try it Yourself »

horizontalAlignment

Controls how Items are horizontally positioned within their container.

  • Type: string
  • Required: No
  • Allowed values:
    • "left"
    • "center"
    • "right"

Example

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "horizontalAlignment:left",
      "weight": "bolder"
    },
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/1.png",
      "size": "medium",
      "horizontalAlignment": "left"
    },
    {
      "type": "TextBlock",
      "text": "horizontalAlignment:center",
      "weight": "bolder",
      "horizontalAlignment": "center"
    },
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/1.png",
      "size": "medium",
      "horizontalAlignment": "center"
    },
    {
      "type": "TextBlock",
      "text": "horizontalAlignment:right",
      "weight": "bolder",
      "horizontalAlignment": "right"
    },
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/1.png",
      "size": "medium",
      "horizontalAlignment": "right"
    }
  ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "horizontalAlignment:left", "weight": "bolder" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "size": "medium", "horizontalAlignment": "left" }, { "type": "TextBlock", "text": "horizontalAlignment:center", "weight": "bolder", "horizontalAlignment": "center" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "size": "medium", "horizontalAlignment": "center" }, { "type": "TextBlock", "text": "horizontalAlignment:right", "weight": "bolder", "horizontalAlignment": "right" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "size": "medium", "horizontalAlignment": "right" } ] }
Try it Yourself »

isSubtle

Indicates whether the color of the text should be slightly toned down to appear less prominent

  • Type: boolean
  • Required: No

Example

{
    "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version":"1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "isSubtle:false",
            "isSubtle": false
        },
        {
            "type": "TextBlock",
            "text": "isSubtle:true",
            "isSubtle": true
        }
    ]
}
{ "$schema":"http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version":"1.0", "body": [ { "type": "TextBlock", "text": "isSubtle:false", "isSubtle": false }, { "type": "TextBlock", "text": "isSubtle:true", "isSubtle": true } ] }
Try it Yourself »

maxLines

When Wrap is true, you can specify the maximum number of lines to allow the textBlock to use.

  • Type: number
  • Required: No

Example

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            "wrap": true,
            "maxLines": 1
        },
        {
            "type": "TextBlock",
            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            "wrap": true,
            "maxLines": 2
        }
    ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", "wrap": true, "maxLines": 1 }, { "type": "TextBlock", "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", "wrap": true, "maxLines": 2 } ] }
Try it Yourself »

size

controls size of the text.

  • Type: string
  • Required: No
  • Allowed values:
    • "small"
    • "default"
    • "medium"
    • "large"
    • "extraLarge"

Example

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "size:default"
        },
        {
            "type": "TextBlock",
            "text": "size:small",
            "size": "small"
        },
        {
            "type": "TextBlock",
            "text": "size:default",
            "size": "default"
        },
        {
            "type": "TextBlock",
            "text": "size:medium",
            "size": "medium"
        },
        {
            "type": "TextBlock",
            "text": "size:large",
            "size": "large"
        },
        {
            "type": "TextBlock",
            "text": "size:extraLarge",
            "size": "extraLarge"
        }
    ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "size:default" }, { "type": "TextBlock", "text": "size:small", "size": "small" }, { "type": "TextBlock", "text": "size:default", "size": "default" }, { "type": "TextBlock", "text": "size:medium", "size": "medium" }, { "type": "TextBlock", "text": "size:large", "size": "large" }, { "type": "TextBlock", "text": "size:extraLarge", "size": "extraLarge" } ] }
Try it Yourself »

text

The actual text to display

  • Type: string
  • Required: Yes

type

Must be TextBlock

  • Type: "TextBlock"
  • Required: No
  • Allowed values:
    • TextBlock

weight

Controls the weight of TextBlock Items

  • Type: string
  • Required: No
  • Allowed values:
    • "lighter"
    • "default"
    • "bolder"

Example

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "weight: lighter",
            "weight": "lighter"
        },
        {
            "type": "TextBlock",
            "text": "weight: default",
            "weight": "default"
        },
        {
            "type": "TextBlock",
            "text": "weight: bolder",
            "weight": "bolder"
        }
    ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "weight: lighter", "weight": "lighter" }, { "type": "TextBlock", "text": "weight: default", "weight": "default" }, { "type": "TextBlock", "text": "weight: bolder", "weight": "bolder" } ] }
Try it Yourself »

wrap

True if be is allowed to wrap

  • Type: boolean
  • Required: No

Example

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "**wrap: false** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat",
            "wrap": false
        },
        {
            "type": "TextBlock",
            "text": "**wrap: true** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            "wrap": true
        }
    ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "**wrap: false** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat", "wrap": false }, { "type": "TextBlock", "text": "**wrap: true** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", "wrap": true } ] }
Try it Yourself »

id

A unique Id associated with the element

  • Type: string
  • Required: No

spacing

Controls the amount of spacing between this element and the previous element.

  • Type: string
  • Required: No
  • Allowed values:
    • "none"
    • "small"
    • "default"
    • "medium"
    • "large"
    • "extraLarge"
    • "padding"

Example

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Spacing controls the amount of space between this element and the one before it",
            "size": "medium",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "spacing: none",
            "spacing": "none"
        },
        {
            "type": "TextBlock",
            "text": "spacing: small",
            "spacing": "small"
        },
        {
            "type": "TextBlock",
            "text": "spacing: default",
            "spacing": "default"
        },
        {
            "type": "TextBlock",
            "text": "spacing: medium",
            "spacing": "medium"
        },
        {
            "type": "TextBlock",
            "text": "spacing: large",
            "spacing": "large"
        },
        {
            "type": "TextBlock",
            "text": "spacing: extraLarge",
            "spacing": "extraLarge"
        },
        {
            "type": "TextBlock",
            "text": "separator: true",
            "separator": true
        },
        {
            "type": "TextBlock",
            "text": "separator: true, spacing: extraLarge",
            "separator": true,
            "spacing": "extraLarge"
        }
    ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "Spacing controls the amount of space between this element and the one before it", "size": "medium", "wrap": true }, { "type": "TextBlock", "text": "spacing: none", "spacing": "none" }, { "type": "TextBlock", "text": "spacing: small", "spacing": "small" }, { "type": "TextBlock", "text": "spacing: default", "spacing": "default" }, { "type": "TextBlock", "text": "spacing: medium", "spacing": "medium" }, { "type": "TextBlock", "text": "spacing: large", "spacing": "large" }, { "type": "TextBlock", "text": "spacing: extraLarge", "spacing": "extraLarge" }, { "type": "TextBlock", "text": "separator: true", "separator": true }, { "type": "TextBlock", "text": "separator: true, spacing: extraLarge", "separator": true, "spacing": "extraLarge" } ] }
Try it Yourself »

separator

The Separator object type describes the look and feel of a separation line between two elements.

  • Type: boolean
  • Required: No, default: false