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