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 The Action that is executed when the ColumnSet is clicked/tapped
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, default: false 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

The Action that is executed when the ColumnSet is clicked/tapped

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

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, default: false