Schema Explorer
Column
Defines a container that is part of a ColumnSet.
Property | Type | Required | Description | Version |
---|---|---|---|---|
items | Element[] |
No | The card elements to render inside the Column . |
1.0 |
backgroundImage | BackgroundImage , uri |
No | Specifies the background image. | 1.2 |
bleed | boolean |
No | Determines whether the column should bleed through its parent’s padding. | 1.2 |
fallback | Column , FallbackOption |
No | Describes what to do when an unknown item is encountered or the requires of this or any children can’t be met. | 1.2 |
minHeight | string |
No | Specifies the minimum height of the column in pixels, like "80px" . |
1.2 |
separator | boolean |
No | When true , draw a separating line between this column and the previous column. |
1.0 |
spacing | Spacing |
No | Controls the amount of spacing between this column and the preceding column. | 1.0 |
selectAction | ISelectAction |
No | An Action that will be invoked when the Column is tapped or selected. Action.ShowCard is not supported. |
1.1 |
style | ContainerStyle? |
No | Style hint for Column . |
1.0 |
verticalContentAlignment | VerticalContentAlignment |
No, default: "top" |
Defines how the content should be aligned vertically within the column. | 1.1 |
width | string , number |
No | "auto" , "stretch" , a number representing relative width of the column in the column group, or in version 1.1 and higher, a specific pixel width, like "50px" . |
1.0 |
Inherited properties
Property | Type | Required | Description | Version |
---|---|---|---|---|
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": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column 2"
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column 3"
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
]
}
]
}
]
}
Properties
items
The card elements to render inside the Column
.
- Type:
Element[]
- 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
backgroundImage
Specifies the background image.
- Type:
BackgroundImage
,uri
- Version : 1.2
- Required: No
- Allowed values:
BackgroundImage
uri
{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": "https://adaptivecards.io/content/AlkiBeach.jpg",
"width": "auto"
},
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/GoldenGardensPark.jpg",
"verticalAlignment": "Center"
},
"width": "stretch"
},
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": "https://adaptivecards.io/content/BainbridgeIsland.jpg",
"width": "auto"
}
]
},
{
"type": "TextBlock",
"text": "You can even repeat the background image..."
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/uparrow.png",
"fillMode": "Repeat"
},
"width": "stretch"
},
{
"type": "Column",
"horizontalAlignment": "Center",
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Those are some crazy arrows",
"wrap": true
}
],
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "Horizontal repeat..."
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/downarrow.png",
"fillMode": "RepeatHorizontally"
},
"width": "stretch"
},
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/uparrow.png",
"fillMode": "RepeatHorizontally",
"verticalAlignment": "Center"
},
"width": "stretch"
},
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/uparrow.png",
"fillMode": "RepeatHorizontally",
"verticalAlignment": "Bottom"
},
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "Vertical repeat..."
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/uparrow.png",
"fillMode": "RepeatVertically"
},
"width": "stretch"
},
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/downarrow.png",
"fillMode": "RepeatVertically",
"horizontalAlignment": "Center"
},
"width": "stretch"
},
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/uparrow.png",
"fillMode": "RepeatVertically",
"horizontalAlignment": "Right"
},
"width": "stretch"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2"
}
bleed
Determines whether the column should bleed through its parent's padding.
- Type:
boolean
- Version : 1.2
- Required: No
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Bleed left"
},
{
"type": "ColumnSet",
"style": "emphasis",
"columns": [
{
"type": "Column",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
}
],
"bleed": true,
"width": "stretch"
},
{
"type": "Column",
"style": "attention",
"items": [
{
"type": "TextBlock",
"text": "Column 2"
}
],
"width": "stretch"
},
{
"type": "Column",
"style": "warning",
"items": [
{
"type": "TextBlock",
"text": "Column 3"
}
],
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "Bleed center"
},
{
"type": "ColumnSet",
"style": "emphasis",
"columns": [
{
"type": "Column",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
}
],
"width": "stretch"
},
{
"type": "Column",
"style": "attention",
"items": [
{
"type": "TextBlock",
"text": "Column 2"
}
],
"bleed": true,
"width": "stretch"
},
{
"type": "Column",
"style": "warning",
"items": [
{
"type": "TextBlock",
"text": "Column 3"
}
],
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "Bleed right"
},
{
"type": "ColumnSet",
"style": "emphasis",
"columns": [
{
"type": "Column",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
}
],
"width": "stretch"
},
{
"type": "Column",
"style": "attention",
"items": [
{
"type": "TextBlock",
"text": "Column 2"
}
],
"width": "stretch"
},
{
"type": "Column",
"style": "warning",
"items": [
{
"type": "TextBlock",
"text": "Column 3"
}
],
"bleed": true,
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "Bleed all"
},
{
"type": "ColumnSet",
"style": "emphasis",
"columns": [
{
"type": "Column",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
}
],
"bleed": true,
"width": "stretch"
},
{
"type": "Column",
"style": "attention",
"items": [
{
"type": "TextBlock",
"text": "Column 2"
}
],
"bleed": true,
"width": "stretch"
},
{
"type": "Column",
"style": "warning",
"items": [
{
"type": "TextBlock",
"text": "Column 3"
}
],
"bleed": true,
"width": "stretch"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
fallback
Describes what to do when an unknown item is encountered or the requires of this or any children can't be met.
- Type:
Column
,FallbackOption
- Version : 1.2
- Required: No
- Allowed values:
Column
"drop"
: Causes this element to be dropped immediately when unknown elements are encountered. The unknown element doesn't bubble up any higher.
{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Graph"
}
],
"fallback": {
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Fallback"
}
]
},
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "Graph"
}
],
"fallback": "drop"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "This is a column",
"wrap": true
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
minHeight
Specifies the minimum height of the column in pixels, like "80px"
.
- Type:
string
- Version : 1.2
- Required: No
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "ColumnSet",
"style": "emphasis",
"minHeight": "100px",
"columns": [
{
"type": "Column",
"style": "default",
"minHeight": "200px",
"items": [
{
"type": "TextBlock",
"wrap": true,
"text": "The columnset has a minHeight of 100px while this column has a minHeight of 200px so it should override"
}
]
},
{
"type": "Column",
"style": "default",
"minHeight": "50px",
"items": [
{
"type": "FactSet",
"facts": [
{
"title": "ColumnSet",
"value": "MinHeight: 100px"
},
{
"title": "Column 1",
"value": "MinHeight: 200px"
},
{
"title": "Column 2",
"value": "MinHeight: 50px"
}
]
}
]
}
]
}
]
}
separator
When true
, draw a separating line between this column and the previous column.
- Type:
boolean
- Required: No
spacing
Controls the amount of spacing between this column and the preceding column.
- Type:
Spacing
- Required: No
- Allowed values:
"default"
"none"
"small"
"medium"
"large"
"extraLarge"
"padding"
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"speak": "The Seattle Seahawks beat the Carolina Panthers 40-7",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/3.png",
"size": "medium"
},
{
"type": "TextBlock",
"text": "SHADES",
"horizontalAlignment": "center",
"weight": "bolder"
}
]
},
{
"type": "Column",
"width": "stretch",
"separator": true,
"spacing": "medium",
"items": [
{
"type": "TextBlock",
"text": "Dec 4",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "Final",
"spacing": "none",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "7 - 40",
"size": "extraLarge",
"horizontalAlignment": "center"
}
]
},
{
"type": "Column",
"width": "auto",
"separator": true,
"spacing": "medium",
"items": [
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/2.png",
"size": "medium",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "SKINS",
"horizontalAlignment": "center",
"weight": "bolder"
}
]
}
]
}
]
}
]
}
selectAction
An Action that will be invoked when the Column
is tapped or selected. Action.ShowCard
is not supported.
- Type:
ISelectAction
- Version : 1.1
- Required: No
- Allowed values:
Action.OpenUrl
Action.Submit
Action.ToggleVisibility
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Try clicking a column!",
"weight": "bolder"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "cool link",
"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column 2"
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "cool link",
"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column 3"
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "cool link",
"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
}
]
}
]
}
style
Style hint for Column
.
- 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.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "No Style"
}
]
},
{
"type": "Column",
"style": "default",
"items": [
{
"type": "TextBlock",
"text": "Default Style"
}
]
},
{
"type": "Column",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "Emphasis Style"
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Container no style"
}
]
},
{
"type": "Container",
"style": "default",
"items": [
{
"type": "TextBlock",
"text": "Container default style"
}
]
},
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "Container emphasis style"
}
]
}
]
}
]
}
]
}
verticalContentAlignment
Defines how the content should be aligned vertically within the column.
- Type:
VerticalContentAlignment
- Version : 1.1
- Required: No, default:
"top"
- Allowed values:
"top"
"center"
"bottom"
{
"$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": "ColumnSet",
"height": "stretch",
"columns": [
{
"type": "Column",
"verticalContentAlignment": "bottom",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
}
]
}
]
}
]
}
width
"auto"
, "stretch"
, a number representing relative width of the column in the column group, or in version 1.1 and higher, a specific pixel width, like "50px"
.
- Type:
string
,number
- Required: No
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "(auto)"
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/adaptive-card-50.png"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "(stretch)"
},
{
"type": "Image",
"horizontalAlignment": "center",
"url": "http://adaptivecards.io/content/adaptive-card-50.png"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "(auto)"
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/adaptive-card-50.png"
}
]
}
]
}
]
}
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