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