Schema Explorer

ColumnSet

ColumnSet divides a region into Columns, allowing elements to sit side-by-side.

Property Type Required Description Version
type "ColumnSet" Yes Must be "ColumnSet". 1.0
columns Column[] No The array of Columns to divide the region into. 1.0
selectAction ISelectAction No An Action that will be invoked when the ColumnSet is tapped or selected. Action.ShowCard is not supported. 1.1
style ContainerStyle? No Style hint for ColumnSet. 1.2
bleed boolean No Determines whether the element should bleed through its parent’s padding. 1.2
backgroundImage BackgroundImage, uri No Specifies the background image. 1.2
minHeight string No Specifies the minimum height of the column set in pixels, like "80px". 1.2

Inherited properties

Property Type Required Description Version
fallback Element, FallbackOption No Describes what to do when an unknown element is encountered or the requires of this or any children can’t be met. 1.2
height BlockElementHeight No Specifies the height of the element. 1.1
separator boolean No When true, draw a separating line at the top of the element. 1.0
spacing Spacing No Controls the amount of spacing between this element and the preceding element. 1.0
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"
						}
					]
				}
			]
		}
	]
}
{ "$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
  • Allowed values:
    • Column

selectAction

An Action that will be invoked when the ColumnSet is tapped or selected. Action.ShowCard is not supported.

  • Type: ISelectAction
  • Version : 1.1
  • Required: No
  • Allowed values:
    • Action.OpenUrl
    • Action.Submit
    • Action.ToggleVisibility

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 »

style

Style hint for ColumnSet.

  • Type: ContainerStyle?
  • Version : 1.2
  • Required: No
  • Allowed values:
    • "default"
    • "emphasis"
    • "good"
    • "attention"
    • "warning"
    • "accent"

Example

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.2",
	"body": [
		{
			"type": "ColumnSet",
			"style": "default",
			"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",
			"style": "emphasis",
			"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",
			"style": "emphasis",
			"columns": [
				{
					"type": "Column",
					"style": "default",
					"items": [
						{
							"type": "Image",
							"url": "http://adaptivecards.io/content/cats/1.png"
						},
						{
							"type": "TextBlock",
							"text": "(none)"
						}
					]
				},
				{
					"type": "Column",
					"style": "emphasis",
					"items": [
						{
							"type": "Image",
							"url": "http://adaptivecards.io/content/cats/1.png"
						},
						{
							"type": "TextBlock",
							"text": "(none)"
						}
					]
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "Container",
							"items": [
								{
									"type": "TextBlock",
									"text": "Contained container - no style",
									"color": "dark"
								}
							]
						},
						{
							"type": "Container",
							"style": "emphasis",
							"items": [
								{
									"type": "TextBlock",
									"text": "Contained container - emphasis",
									"color": "dark"
								}
							]
						},
						{
							"type": "Container",
							"style": "default",
							"items": [
								{
									"type": "TextBlock",
									"text": "Contained container - default",
									"color": "dark"
								}
							]
						}
					]
				}
			]
		}
	]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.2", "body": [ { "type": "ColumnSet", "style": "default", "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", "style": "emphasis", "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", "style": "emphasis", "columns": [ { "type": "Column", "style": "default", "items": [ { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png" }, { "type": "TextBlock", "text": "(none)" } ] }, { "type": "Column", "style": "emphasis", "items": [ { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png" }, { "type": "TextBlock", "text": "(none)" } ] }, { "type": "Column", "items": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "Contained container - no style", "color": "dark" } ] }, { "type": "Container", "style": "emphasis", "items": [ { "type": "TextBlock", "text": "Contained container - emphasis", "color": "dark" } ] }, { "type": "Container", "style": "default", "items": [ { "type": "TextBlock", "text": "Contained container - default", "color": "dark" } ] } ] } ] } ] }
Try it Yourself »

bleed

Determines whether the element should bleed through its parent's padding.

  • Type: boolean
  • Version : 1.2
  • Required: No

Example

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "ColumnSet",
			"style": "good",
			"bleed": true,
			"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", "style": "good", "bleed": true, "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 »

backgroundImage

Specifies the background image.

  • Type: BackgroundImage, uri
  • Version : 1.2
  • Required: No
  • Allowed values:
    • BackgroundImage
    • uri

minHeight

Specifies the minimum height of the column set in pixels, like "80px".

  • Type: string
  • Version : 1.2
  • Required: No

Example

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.2",
	"body": [
		{
			"type": "ColumnSet",
			"style": "emphasis",
			"minHeight": "200px",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"wrap": true,
							"text": "This column set has a minimum height of 200px"
						}
					]
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "FactSet",
							"facts": [
								{
									"title": "ColumnSet",
									"value": "minHeight: 200px"
								},
								{
									"title": "Column",
									"value": "minHeight: not specified"
								}
							]
						}
					]
				}
			]
		}
	]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.2", "body": [ { "type": "ColumnSet", "style": "emphasis", "minHeight": "200px", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "wrap": true, "text": "This column set has a minimum height of 200px" } ] }, { "type": "Column", "items": [ { "type": "FactSet", "facts": [ { "title": "ColumnSet", "value": "minHeight: 200px" }, { "title": "Column", "value": "minHeight: not specified" } ] } ] } ] } ] }
Try it Yourself »

fallback

Describes what to do when an unknown element is encountered or the requires of this or any children can't be met.

  • Type: Element, FallbackOption
  • Version : 1.2
  • 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
    • "drop": Causes this element to be dropped immediately when unknown elements are encountered. The unknown element doesn't bubble up any higher.

height

Specifies the height of the element.

  • Type: BlockElementHeight
  • Version : 1.1
  • Required: No
  • Allowed values:
    • "auto": The height of the container will be determined by the height of its contents.
    • "stretch": The container will stretch its height to the available remaining height of the parent container.

separator

When true, draw a separating line at the top of the element.

  • Type: boolean
  • Required: No

spacing

Controls the amount of spacing between this element and the preceding element.

  • Type: Spacing
  • Required: No
  • Allowed values:
    • "default"
    • "none"
    • "small"
    • "medium"
    • "large"
    • "extraLarge"
    • "padding"

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