Schema Explorer

Choose element:

Important note about accessibility: In version 1.3 of the schema we introduced a label property on Inputs to improve accessibility. If the Host app you are targetting supports v1.3 you should use label instead of a TextBlock as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.

Container

Containers group items together.

Property Type Required Description Version
type "Container" Yes Must be "Container". 1.0
items Element[] Yes The card elements to render inside the Container. 1.0
selectAction ISelectAction No An Action that will be invoked when the Container is tapped or selected. Action.ShowCard is not supported. 1.1
style ContainerStyle? No Style hint for Container. 1.0
verticalContentAlignment VerticalContentAlignment No, default: "top" Defines how the content should be aligned vertically within the container. 1.1
bleed boolean No Determines whether the element should bleed through its parent’s padding. 1.2
backgroundImage BackgroundImage, uri No Specifies the background image. Acceptable formats are PNG, JPEG, and GIF 1.2
minHeight string No Specifies the minimum height of the container in pixels, like "80px". 1.2

Inherited properties

Property Type Required Description Version
fallback Element, FallbackOption No Describes what to do when an unknown element is encountered or the requires of this or any children can’t be met. 1.2
height BlockElementHeight No Specifies the height of the element. 1.1
separator boolean No When true, draw a separating line at the top of the element. 1.0
spacing Spacing No Controls the amount of spacing between this element and the preceding element. 1.0
id string No A unique identifier associated with the item. 1.0
isVisible boolean No, default: true If false, this item will be removed from the visual tree. 1.2
requires Dictionary<string> No A series of key/value pairs indicating features that the item requires with corresponding minimum version. When a feature is missing or of insufficient version, fallback is triggered. 1.2

Example

JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "Container",
			"items": [
				{
					"type": "TextBlock",
					"text": "This is some text"
				},
				{
					"type": "Image",
					"url": "https://adaptivecards.io/content/cats/1.png"
				}
			]
		}
	]
}
Adaptive Card

Properties

items

The card elements to render inside the Container.

  • Type: Element[]
  • Required: Yes
  • Allowed values:
    • ActionSet
    • ColumnSet
    • Container
    • FactSet
    • Image
    • ImageSet
    • Input.ChoiceSet
    • Input.Date
    • Input.Number
    • Input.Text
    • Input.Time
    • Input.Toggle
    • Media
    • RichTextBlock
    • TextBlock

selectAction

An Action that will be invoked when the Container is tapped or selected. Action.ShowCard is not supported.

  • Type: ISelectAction
  • Version : 1.1
  • Required: No
  • Allowed values:
    • Action.Execute
    • Action.OpenUrl
    • Action.Submit
    • Action.ToggleVisibility
JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "Container",
			"items": [
				{
					"type": "TextBlock",
					"text": "Cool link"
				}
			],
			"selectAction": {
				"type": "Action.OpenUrl",
				"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
			}
		},
		{
			"type": "Container",
			"style": "emphasis",
			"items": [
				{
					"type": "TextBlock",
					"text": "Emphasis link"
				}
			],
			"selectAction": {
				"type": "Action.OpenUrl",
				"url": "https://msn.com"
			}
		},
		{
			"type": "Container",
			"items": [
				{
					"type": "TextBlock",
					"text": "Submit action"
				}
			],
			"selectAction": {
				"type": "Action.Submit",
				"title": "Submit action",
				"data": {
					"info": "My submit action data"
				}
			}
		}
	]
}
Adaptive Card

style

Style hint for Container.

  • Type: ContainerStyle?
  • Required: No
  • Allowed values:
    • "default"
    • "emphasis"
    • "good": Added in version 1.2.
    • "attention": Added in version 1.2.
    • "warning": Added in version 1.2.
    • "accent": Added in version 1.2.
JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"style": "emphasis",
	"body": [
		{
			"type": "TextBlock",
			"text": "The card has the emphasis style"
		},
		{
			"type": "Container",
			"style": "default",
			"items": [
				{
					"type": "TextBlock",
					"text": "This container has the default style"
				},
				{
					"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"
				}
			]
		},
		{
			"type": "Container",
			"style": "emphasis",
			"items": [
				{
					"type": "TextBlock",
					"text": "This container has the emphasis style"
				},
				{
					"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"
				},
				{
					"type": "Container",
					"items": [
						{
							"type": "TextBlock",
							"text": "Contained container - no style",
							"color": "dark"
						}
					]
				},
				{
					"type": "Container",
					"style": "emphasis",
					"items": [
						{
							"type": "TextBlock",
							"text": "Contained container - emphasis",
							"color": "dark"
						}
					]
				},
				{
					"type": "Container",
					"style": "default",
					"items": [
						{
							"type": "TextBlock",
							"text": "Contained container - default",
							"color": "dark"
						}
					]
				}
			]
		}
	]
}
Adaptive Card
JSON
{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "Container",
      "style": "default",
      "items": [
        {
          "type": "TextBlock",
          "text": "This container has the default style"
        },
        {
          "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"
        }
      ]
    },
    {
      "type": "Container",
      "style": "accent",
      "items": [
        {
          "type": "TextBlock",
          "text": "This container has the accent style"
        },
        {
          "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"
        },
        {
          "type": "Container",
          "items": [
            {
              "type": "TextBlock",
              "text": "Contained container - no style",
              "color": "dark"
            }
          ]
        },
        {
          "type": "Container",
          "style": "emphasis",
          "items": [
            {
              "type": "TextBlock",
              "text": "Contained container - emphasis",
              "color": "dark"
            }
          ]
        },
        {
          "type": "Container",
          "style": "default",
          "items": [
            {
              "type": "TextBlock",
              "text": "Contained container - default",
              "color": "dark"
            }
          ]
        },
        {
          "type": "Container",
          "style": "good",
          "items": [
            {
              "type": "TextBlock",
              "text": "Contained container - good",
              "color": "dark"
            }
          ]
        },
        {
          "type": "Container",
          "style": "warning",
          "items": [
            {
              "type": "TextBlock",
              "text": "Contained container - warning",
              "color": "dark"
            }
          ]
        },
        {
          "type": "Container",
          "style": "attention",
          "items": [
            {
              "type": "TextBlock",
              "text": "Contained container - attention",
              "color": "dark"
            }
          ]
        },
        {
          "type": "Container",
          "style": "accent",
          "items": [
            {
              "type": "TextBlock",
              "text": "Contained container - accent",
              "color": "dark"
            }
          ]
        }
      ]
    }
  ]
}
Adaptive Card

verticalContentAlignment

Defines how the content should be aligned vertically within the container.

  • Type: VerticalContentAlignment
  • Version : 1.1
  • Required: No, default: "top"
  • Allowed values:
    • "top"
    • "center"
    • "bottom"
JSON
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
    "version": "1.1",	
    "minHeight": "150px",
    "body": [
        {
            "type": "TextBlock",
            "text": "I'm a regular TextBlock..."
        },
        {
            "type": "Container",
            "height": "stretch",
            "verticalContentAlignment": "center",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "But I'm centered..."
                }
            ]
        },
        {
            "type": "Container",
            "verticalContentAlignment": "bottom",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "And I'm like a footer!"
                }
            ]
        }
    ]
}
Adaptive Card

bleed

Determines whether the element should bleed through its parent's padding.

  • Type: boolean
  • Version : 1.2
  • Required: No
JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "Container",
			"style": "good",
			"bleed": true,
			"items": [
				{
					"type": "TextBlock",
					"text": "This Container bleeds into its parent padding for a nice visual appearance!",
					"wrap": true
				}
			]
		},
		{
			"type": "Container",
			"style": "warning",
			"items": [
				{
					"type": "TextBlock",
					"text": "This Container is just a plain ol' container, it looks nice too though!",
					"wrap": true
				}
			]
		}
	]
}
Adaptive Card

backgroundImage

Specifies the background image. Acceptable formats are PNG, JPEG, and GIF

  • Type: BackgroundImage, uri
  • Version : 1.2
  • Required: No
  • Allowed values:
    • BackgroundImage
    • uri
JSON
{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "minHeight": "150px",
            "backgroundImage": "https://adaptivecards.io/content/AlkiBeach.jpg",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "What a beautiful background"
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "They can even repeat a bunch of different ways..."
        },
        {
            "type": "Container",
            "minHeight": "100px",
            "backgroundImage": {
                "url": "https://adaptivecards.io/content/uparrow.png",
                "fillMode": "Repeat"
            }
        },
        {
            "type": "Container",
            "backgroundImage": {
                "url": "https://adaptivecards.io/content/uparrow.png",
                "fillMode": "RepeatHorizontally",
                "verticalAlignment": "Center"
            }
        },
        {
            "type": "Container",
            "minHeight": "100px",
            "backgroundImage": {
                "url": "https://adaptivecards.io/content/uparrow.png",
                "fillMode": "RepeatVertically",
                "horizontalAlignment": "Center"
            }
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}
Adaptive Card

minHeight

Specifies the minimum height of the container in pixels, like "80px".

  • Type: string
  • Version : 1.2
  • Required: No
JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.2",
	"body": [
		{
			"type": "Container",
			"minHeight": "100px",
			"style": "emphasis",
			"items": [
				{
					"type": "TextBlock",
					"wrap": true,
					"text": "This textblock is inside a container with a min height of 100px"
				}
			]
		}
	]
}
Adaptive Card

fallback

Describes what to do when an unknown element is encountered or the requires of this or any children can't be met.

  • Type: Element, FallbackOption
  • Version : 1.2
  • Required: No
  • Allowed values:
    • ActionSet
    • ColumnSet
    • Container
    • FactSet
    • Image
    • ImageSet
    • Input.ChoiceSet
    • Input.Date
    • Input.Number
    • Input.Text
    • Input.Time
    • Input.Toggle
    • Media
    • RichTextBlock
    • TextBlock
    • "drop": Causes this element to be dropped immediately when unknown elements are encountered. The unknown element doesn't bubble up any higher.

height

Specifies the height of the element.

  • Type: BlockElementHeight
  • Version : 1.1
  • Required: No
  • Allowed values:
    • "auto": The height of the container will be determined by the height of its contents.
    • "stretch": The container will stretch its height to the available remaining height of the parent container.

separator

When true, draw a separating line at the top of the element.

  • Type: boolean
  • Required: No

spacing

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

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

id

A unique identifier associated with the item.

  • Type: string
  • Required: No

isVisible

If false, this item will be removed from the visual tree.

  • Type: boolean
  • Version : 1.2
  • Required: No, default: true

requires

A series of key/value pairs indicating features that the item requires with corresponding minimum version. When a feature is missing or of insufficient version, fallback is triggered.

  • Type: Dictionary<string>
  • Version : 1.2
  • Required: No