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:

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