Card Elements

There are two Card Elements introduced which can be used in the Adaptive Cards that is implemented as part of MS Teams Notification, as follows:

• ColumnSet: A collection of columns, each ColumnSet act as a container which add structure to the notification.
  

• TextBlock: Allow control over text, font size, weight, and color.

The MS Teams designer has an empty frame and Card Elements on the left panel which can be drag and dropped in the Adaptive  Card.

Figure: Microsoft Teams

Note

Every base Adaptive card that send notification to a user will have the default message as follows:

This is an auto generated notification. Any responses to this will not be recorded.

ColumnSet

A ColumnSet is used to add column(s) to the notification.

Configure ColumnSet

To configure ColumnSet, perform the following steps:

1. Drag and Drop ColumnSet Card Element in the empty Adaptive Card.

   

   Figure: ColumnSet Elements
   

2. Click inside the ColumnSet to view the properties of the Card Element.

   

   Figure: ColumnSet
   

3. Properties of ColumnSet Card Element consist Layout and Style. For more information, refer to the following:

   Layout

   Layout properties contain various elements such as spacing, dimensions, and separator etc.

   

   Figure: ColumnSet Layout Element Properties

   Spacing

   Spacing: This element is applicable for the ColumnSet that is added below any other card element. It indicates the gap between two card elements.
   

   

   Figure: ColumnSet Spacing

   Refer to the following table for Field Description

   Field	Description
   Default	Default is selected as the selected option and the spacing is looks optimum. Figure: Default Spacing
   None	Select None, to remove the spacing between two card elements. Figure: No Spacing
   Small	Select Small, to space the two card elements with relatively space small. Figure: Small Spacing
   Medium	Select Medium, to space the two card elements with little more, compared to Small Spacing. Figure: Medium Spacing
   Large	Select Large, to space the two card elements more apart compared to Medium. Figure: Large Spacing
   Extra Large	Select Extra Large to space the two elements maximum apart. Figure: Extra Large Spacing

   Separator

   On selecting the checkbox, a faint horizontal line is added at the top of the text in a ColumnSet. If multiple Columns exists within the container then, a faint vertical line is added to the left of the Column.

   However, this is not applicable for the top most ColumnSet.

   

   Figure: Separator

   Horizontal alignment and Height Element Properties are not applicable to the ColumnSet Layout.

   Style

   Style Element for ColumnSet is not applicable and displays blank.

   

   Figure: ColumnSet Style

4. Click multi-column icon to add an array of Empty Columns next to each other inside the ColumnSet container.
   

   

   Figure: Array of Columns
   

Additional properties in Layout and Style

Additional properties are displayed only for Column inside the ColumnSet.

Layout: Adding more Columns will create an array of Columns and enable additional properties for each Empty Column as displayed below:

Figure: Layout Properties for Column

Style: Enables the Application Designer to style the Column using various colors.

Figure: Empty Column Style Properties

For more information, refer to the following table for style types:

Field	Description
(not set)	By default (not set) this is selected. Which indicate no style is applied to Column Set.
Default	Selecting Default will not impact the look of the Card Element, it remains white.
Emphasis	Select Emphasis, to display subtle Yellow.
Accent	Select Accent, to display in as a Blue shade.
Good	Select Good, to display in as a Green shade.
Attention	Select Attention, to display as pale Orange.
Warning	Select Warning, to view as darker shade of Yellow.

Select Bleed, to extend the color across the Column.

Figure: Bleed Style

TextBlock

A TextBlock is used to add content within the container and format the text using various layout and style properties. TextBlock can be added as a separate entity or within a Column. However, there are limitations when added within the Column as part of properties.

To configure, drag and drop TextBlock Card Element on the canvas.

Figure: TextBlock

The properties of TextBlock are as follows:

Layout

Figure: Layout Properties

Text: Text added to the Text property on the properties card, is reflected onto the TextBlock on the Notification Designer canvas.

Figure: Text

Spacing and Separator works same as described in the ColumnSet.

Note

Spacing and Separator will not work for TextBlock if added inside a Column.

Horizontal Alignment: Select text alignment from the dropdown. Text within the TextBlock is alligned to Left, Center and Right. This is applicable for Textblock within Column and as a Separate entity.

Alignment	Display
Left
Center
Right

Wrap: Select Warp to display all the lines or clear the checkbox to display content in a single line.

Wrap	Display

Maximum Lines: Application Designer can select the number of lines to be displayed. Based on the value, text is displayed.
This is applicable only if Wrap is selected.

Example: In the following figure, Maximum Lines value is 2. Hence, only two lines are displayed in the TextBlock.

Figure: Textblock Wrap

Style

Style properties of a TextBlock are as follows:

Figure: Style Properties

Refer to the following table for Field Description.

Field	Description
Font Type	Select Font Type, from the following: (not set): There will be no change to the font, it indicates that no font type is applied to the TextBlock. By default, this option is selected. Default: Selecting this option will retain font type, and have proportional width. Monospace: If Monospace is selected, then the font is arranged with the fixed-width as displayed below:
Size	Select Font Size from the following values: (not set) Small Default Medium Large Extra Large
Weight	Select Weight from the following options: (not set) Lighter Default Bolder
Color	Select the font color from the following options: (not set) Default Dark Light Accent Good Warning Attention
Subtle	Select subtle type from the following options: (not set) True False