Schema Explorer
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
{
"$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"
}
]
}
]
}
Properties
items
The card elements to render inside the Container.
- Type:
Element[] - Required: Yes
- Allowed values:
ActionSetColumnSetContainerFactSetImageImageSetInput.ChoiceSetInput.DateInput.NumberInput.TextInput.TimeInput.ToggleMediaRichTextBlockTextBlock
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.OpenUrlAction.SubmitAction.ToggleVisibility
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.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.
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.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"
Example
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.1",
"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"
}
]
}
]
}
bleed
Determines whether the element should bleed through its parent's padding.
- Type:
boolean - Version : 1.2
- Required: No
Example
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "Text Block"
}
],
"bleed": true
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}backgroundImage
Specifies the background image.
- Type:
BackgroundImage,uri - Version : 1.2
- Required: No
- Allowed values:
BackgroundImageuri
Example
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "Container",
"backgroundImage": "https://picsum.photos/60/60?image=101",
"items": [
{
"type": "TextBlock",
"text": "Container 1 - Text 1 - Stretch"
},
{
"type": "TextBlock",
"text": "Container 1 - Text 2 - Stretch"
},
{
"type": "TextBlock",
"text": "Container 1 - Text 3 - Stretch"
}
]
},
{
"type": "Container",
"backgroundImage": {
"url": "https://picsum.photos/30/30?image=101",
"fillMode": "repeat"
},
"items": [
{
"type": "TextBlock",
"text": "Container 2 - Text 1 - Repeat"
},
{
"type": "TextBlock",
"text": "Container 2 - Text 2 - Repeat"
},
{
"type": "TextBlock",
"text": "Container 2 - Text 3 - Repeat"
}
]
},
{
"type": "Container",
"backgroundImage": {
"url": "https://picsum.photos/30/30?image=101",
"fillMode": "repeatHorizontally"
},
"items": [
{
"type": "TextBlock",
"text": "Container 3 - Text 1 - RepeatHorizontally"
},
{
"type": "TextBlock",
"text": "Container 3 - Text 2 - RepeatHorizontally"
}
]
},
{
"type": "Container",
"backgroundImage": {
"url": "https://picsum.photos/30/30?image=101",
"fillMode": "repeatHorizontally",
"verticalAlignment": "center"
},
"items": [
{
"type": "TextBlock",
"text": "Container 4 - Text 1 - RepeatHorizontally"
},
{
"type": "TextBlock",
"text": "Container 4 - Text 2 - RepeatHorizontally"
}
]
},
{
"type": "Container",
"backgroundImage": {
"url": "https://picsum.photos/30/30?image=101",
"fillMode": "repeatHorizontally",
"verticalAlignment": "bottom"
},
"items": [
{
"type": "TextBlock",
"text": "Container 5 - Text 1 - RepeatHorizontally"
},
{
"type": "TextBlock",
"text": "Container 5 - Text 2 - RepeatHorizontally"
}
]
},
{
"type": "Container",
"backgroundImage": {
"url": "https://picsum.photos/30/30?image=101",
"fillMode": "repeatVertically"
},
"items": [
{
"type": "TextBlock",
"text": "Container 6 - Text 1 - RepeatVertically"
},
{
"type": "TextBlock",
"text": "Container 6 - Text 2 - RepeatVertically"
},
{
"type": "TextBlock",
"text": "Container 6 - Text 3 - RepeatVertically"
}
]
},
{
"type": "Container",
"backgroundImage": {
"url": "https://picsum.photos/30/30?image=101",
"fillMode": "repeatVertically",
"horizontalAlignment": "center"
},
"items": [
{
"type": "TextBlock",
"text": "Container 7 - Text 1 - RepeatVertically"
},
{
"type": "TextBlock",
"text": "Container 7 - Text 2 - RepeatVertically"
},
{
"type": "TextBlock",
"text": "Container 7 - Text 3 - RepeatVertically"
}
]
},
{
"type": "Container",
"backgroundImage": {
"url": "https://picsum.photos/30/30?image=101",
"fillMode": "repeatVertically",
"horizontalAlignment": "right"
},
"items": [
{
"type": "TextBlock",
"text": "Container 8 - Text 1 - RepeatVertically"
},
{
"type": "TextBlock",
"text": "Container 8 - Text 2 - RepeatVertically"
},
{
"type": "TextBlock",
"text": "Container 8 - Text 3 - RepeatVertically"
}
]
}
]
}
minHeight
Specifies the minimum height of the container in pixels, like "80px".
- Type:
string - Version : 1.2
- Required: No
Example
{
"$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:
ActionSetColumnSetContainerFactSetImageImageSetInput.ChoiceSetInput.DateInput.NumberInput.TextInput.TimeInput.ToggleMediaRichTextBlockTextBlock"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
