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:
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
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:
BackgroundImage
uri
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:
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