Schema Explorer
ColumnSet
ColumnSet divides a region into Columns, allowing elements to sit side-by-side.
Property | Type | Required | Description | Version |
---|---|---|---|---|
columns | Column[] |
No | The array of Columns to divide the region into. |
1.0 |
selectAction | object |
No | An Action that will be invoked when the ColumnSet is tapped or selected. Action.ShowCard is not supported. |
1.1 |
type | "ColumnSet" |
Yes | Must be "ColumnSet" . |
1.0 |
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": "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"
}
]
}
]
}
]
}
{
"$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"
}
]
}
]
}
]
}
Try it Yourself »
Properties
columns
The array of Columns
to divide the region into.
- Type:
Column[]
- Required: No
selectAction
An Action that will be invoked when the ColumnSet
is tapped or selected. Action.ShowCard
is not supported.
- Type:
object
- Required: No
Example
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Pick up where you left off?",
"weight": "bolder"
},
{
"type": "ColumnSet",
"spacing": "medium",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://unsplash.it/80?image=1083",
"size": "medium"
}
]
},
{
"type": "Column",
"width": 4,
"items": [
{
"type": "TextBlock",
"text": "Silver Star Mountain"
},
{
"type": "TextBlock",
"text": "Maps",
"isSubtle": true,
"spacing": "none"
}
]
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "Silver Star Mountain",
"url": "ms-cortana:silver-star-mountain"
}
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://unsplash.it/80?image=1082",
"size": "medium"
}
]
},
{
"type": "Column",
"width": 4,
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "Kitchen Remodel"
},
{
"type": "TextBlock",
"text": "With EMPHASIS",
"isSubtle": true,
"spacing": "none"
}
]
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "Kitchen Remodel",
"url": "ms-cortana:kitchen-remodel"
}
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://unsplash.it/80?image=1080",
"size": "medium"
}
]
},
{
"type": "Column",
"width": 4,
"items": [
{
"type": "TextBlock",
"text": "The Witcher"
},
{
"type": "TextBlock",
"text": "Netflix",
"isSubtle": true,
"spacing": "none"
}
]
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "The Witcher",
"url": "ms-cortana:the-witcher"
}
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Resume all",
"url": "ms-cortana:resume-all"
},
{
"type": "Action.OpenUrl",
"title": "More activities",
"url": "ms-cortana:more-activities"
}
]
}
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Pick up where you left off?",
"weight": "bolder"
},
{
"type": "ColumnSet",
"spacing": "medium",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://unsplash.it/80?image=1083",
"size": "medium"
}
]
},
{
"type": "Column",
"width": 4,
"items": [
{
"type": "TextBlock",
"text": "Silver Star Mountain"
},
{
"type": "TextBlock",
"text": "Maps",
"isSubtle": true,
"spacing": "none"
}
]
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "Silver Star Mountain",
"url": "ms-cortana:silver-star-mountain"
}
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://unsplash.it/80?image=1082",
"size": "medium"
}
]
},
{
"type": "Column",
"width": 4,
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "Kitchen Remodel"
},
{
"type": "TextBlock",
"text": "With EMPHASIS",
"isSubtle": true,
"spacing": "none"
}
]
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "Kitchen Remodel",
"url": "ms-cortana:kitchen-remodel"
}
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://unsplash.it/80?image=1080",
"size": "medium"
}
]
},
{
"type": "Column",
"width": 4,
"items": [
{
"type": "TextBlock",
"text": "The Witcher"
},
{
"type": "TextBlock",
"text": "Netflix",
"isSubtle": true,
"spacing": "none"
}
]
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "The Witcher",
"url": "ms-cortana:the-witcher"
}
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Resume all",
"url": "ms-cortana:resume-all"
},
{
"type": "Action.OpenUrl",
"title": "More activities",
"url": "ms-cortana:more-activities"
}
]
}
Try it Yourself »type
Must be "ColumnSet"
.
- Type:
"ColumnSet"
- Required: Yes
- Allowed values:
ColumnSet
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": "ColumnSet Spacing",
"size": "extraLarge"
},
{
"type": "ColumnSet",
"spacing": "none",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
},
{
"type": "TextBlock",
"text": "(none)"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
]
}
]
},
{
"type": "ColumnSet",
"spacing": "large",
"separator": true,
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
},
{
"type": "TextBlock",
"text": "(large)"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"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": "TextBlock",
"text": "ColumnSet Spacing",
"size": "extraLarge"
},
{
"type": "ColumnSet",
"spacing": "none",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
},
{
"type": "TextBlock",
"text": "(none)"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
]
}
]
},
{
"type": "ColumnSet",
"spacing": "large",
"separator": true,
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
},
{
"type": "TextBlock",
"text": "(large)"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
]
}
]
}
]
}
Try it Yourself »separator
When true
, draw a separating line at the top of the element.
- Type:
boolean
- Required: No, default:
false