Schema Explorer

Choose element:

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.	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": "http://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.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": "This is some text"
				}
			],
			"selectAction": {
				"type": "Action.OpenUrl",
				"title": "cool link",
				"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
			}
		},
		{
			"type": "Container",
			"style": "emphasis",
			"items": [
				{
					"type": "TextBlock",
					"text": "Emphasis container"
				}
			],
			"selectAction": {
				"type": "Action.OpenUrl",
				"title": "cool link 2",
				"url": "https://msn.com"
			}
		},
		{
			"type": "Container",
			"items": [
				{
					"type": "TextBlock",
					"text": "Default container again, using ShowCard",
					"wrap": true
				}
			],
			"selectAction": {
				"type": "Action.Submit",
				"title": "Submit action",
				"data": "Submitted!"
			}
		},
		{
			"type": "Container",
			"items": [
				{
					"type": "TextBlock",
					"text": "Submit action"
				}
			],
			"selectAction": {
				"type": "Action.Submit",
				"title": "Submit action",
				"data": {
					"info": "My submit action data"
				}
			}
		}
	]
}

Adaptive Card

{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "This is some text" } ], "selectAction": { "type": "Action.OpenUrl", "title": "cool link", "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ" } }, { "type": "Container", "style": "emphasis", "items": [ { "type": "TextBlock", "text": "Emphasis container" } ], "selectAction": { "type": "Action.OpenUrl", "title": "cool link 2", "url": "https://msn.com" } }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "Default container again, using ShowCard", "wrap": true } ], "selectAction": { "type": "Action.Submit", "title": "Submit action", "data": "Submitted!" } }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "Submit action" } ], "selectAction": { "type": "Action.Submit", "title": "Submit action", "data": { "info": "My submit action data" } } } ] }

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

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

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

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

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

{ "$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!" } ] } ] }

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

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

backgroundImage

Specifies the background image.

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

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

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

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

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

Schema Explorer

Container

Example

Properties

items

selectAction

style

verticalContentAlignment

bleed

backgroundImage

minHeight

fallback

height

separator

spacing

id

isVisible

requires

Learn

Blog