Schema Explorer

Container

Containers group items together.

Property Type Required Description Version
type "Container" Yes Must be "Container". 1.0
items array[] Yes The card elements to render inside the Container. 1.0
selectAction object No An Action that will be invoked when the Container is tapped or selected. Action.ShowCard is not supported. 1.1
style string No Style hint for Container. 1.0
verticalContentAlignment string No, default: "top" Defines how the content should be aligned vertically within the container. 1.1
id string No A unique identifier associated with the element. 1.0
spacing string No Controls the amount of spacing between this element and the preceding element. 1.0
separator boolean No, default: false When true, draw a separating line at the top of the element. 1.0

Example

{
	"$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"
				}
			]
		}
	]
}
{ "$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" } ] } ] }
Try it Yourself »

Properties

type

Must be "Container".

  • Type: "Container"
  • Required: Yes
  • Allowed values:
    • Container

items

The card elements to render inside the Container.

  • Type: array[]
  • Required: Yes

selectAction

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

  • Type: object
  • Required: No

Example

{
	"$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.ShowCard",
				"title": "Show card action",
				"card": {
					"type": "AdaptiveCard",
					"body": [
						{
							"type": "TextBlock",
							"text": "What do you think?"
						}
					],
					"actions": [
						{
							"type": "Action.Submit",
							"title": "Neat!"
						}
					]
				}
			}
		},
		{
			"type": "Container",
			"items": [
				{
					"type": "TextBlock",
					"text": "Submit action"
				}
			],
			"selectAction": {
				"type": "Action.Submit",
				"title": "Submit action",
				"data": {
					"info": "My submit action data"
				}
			}
		}
	]
}
{ "$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.ShowCard", "title": "Show card action", "card": { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "What do you think?" } ], "actions": [ { "type": "Action.Submit", "title": "Neat!" } ] } } }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "Submit action" } ], "selectAction": { "type": "Action.Submit", "title": "Submit action", "data": { "info": "My submit action data" } } } ] }
Try it Yourself »

style

Style hint for Container.

  • Type: string
  • Required: No
  • Allowed values:
    • "default"
    • "emphasis"

Example

{
	"$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"
						}
					]
				}
			]
		}
	]
}
{ "$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" } ] } ] } ] }
Try it Yourself »

verticalContentAlignment

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

  • Type: string
  • Required: No, default: "top"

Example

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.1",
	"height": "stretch",
	"verticalContentAlignment": "center",
	"body": [
		{
			"type": "TextBlock",
			"text": "Hi,"
		},
		{
			"type": "TextBlock",
			"text": "MasterHip",
			"isSubtle": true
		},
		{
			"type": "Container",
			"height": "stretch",
			"verticalContentAlignment": "center",
			"items": [
				{
					"type": "TextBlock",
					"text": "Column 1"
				}
			]
		}
	]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.1", "height": "stretch", "verticalContentAlignment": "center", "body": [ { "type": "TextBlock", "text": "Hi," }, { "type": "TextBlock", "text": "MasterHip", "isSubtle": true }, { "type": "Container", "height": "stretch", "verticalContentAlignment": "center", "items": [ { "type": "TextBlock", "text": "Column 1" } ] } ] }
Try it Yourself »

id

A unique identifier associated with the element.

  • Type: string
  • Required: No

spacing

Controls the amount of spacing between this element and the preceding 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": "Container Spacing",
			"size": "extraLarge"
		},
		{
			"type": "Container",
			"spacing": "none",
			"items": [
				{
					"type": "TextBlock",
					"text": "spacing: none",
					"weight": "bolder",
					"size": "medium"
				}
			]
		},
		{
			"type": "Container",
			"spacing": "extraLarge",
			"separator": true,
			"items": [
				{
					"type": "TextBlock",
					"text": "spacing: extraLarge, separator: true",
					"weight": "bolder",
					"size": "medium"
				}
			]
		}
	]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "Container Spacing", "size": "extraLarge" }, { "type": "Container", "spacing": "none", "items": [ { "type": "TextBlock", "text": "spacing: none", "weight": "bolder", "size": "medium" } ] }, { "type": "Container", "spacing": "extraLarge", "separator": true, "items": [ { "type": "TextBlock", "text": "spacing: extraLarge, separator: true", "weight": "bolder", "size": "medium" } ] } ] }
Try it Yourself »

separator

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

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