Schema Explorer

ColumnSet

ColumnSet divides a region into Column's allowing elements to sit side-by-side

Property Type Required Description
columns Column[] No The array of Columns to divide the region into
selectAction object No An Action that will be invoked when the ColumnSet is tapped or selected. Action.ShowCard not supported
type "ColumnSet" No Must be ColumnSet
id string No A unique Id associated with the element
spacing string No Controls the amount of spacing between this element and the previous element.
separator boolean No The Separator object type describes the look and feel of a separation line between two elements.

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 not supported

  • Type: object
  • Required: No
  • Allowed values:

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,
							"separation": "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,
							"separation": "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,
							"separation": "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, "separation": "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, "separation": "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, "separation": "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: No
  • Allowed values:
    • ColumnSet

id

A unique Id associated with the element

  • Type: string
  • Required: No

spacing

Controls the amount of spacing between this element and the previous 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

The Separator object type describes the look and feel of a separation line between two elements.

  • Type: boolean
  • Required: No