diff --git a/samples/account/README.md b/samples/account/README.md
index 3f3a84d..5458b54 100644
--- a/samples/account/README.md
+++ b/samples/account/README.md
@@ -53,9 +53,6 @@ Below you'll find a few alternative expressions of the card.
Teams provides support for this tool, which is ideal for constructing and modifying cards. Copy the [card](card.json) payload and click on the ‘Open in Designer’ button to start working in the Designer platform.
-> [!NOTE]
-> Responsive layout is not supported in the Designer.
-
_To create a "full width" card, add the following code to the JSON._
```json
@@ -95,7 +92,8 @@ This is where the rubber meets the road to ensure high quality cards for all use
* **Design**: Our tools can help you learn Teams patterns and design apps and cards.
* Design Teams apps and cards with the [The Microsoft Teams UI Kit](https://www.figma.com/community/file/916836509871353159), which has core components, templates, and best practices.
- * Find Microsoft icons from [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography) and modify them to to use in your cards (you'll need to save them out as pngs while we work on building in Fluent icon support).
+
+ * Fluent icons are pre-built into the Designer and support both light and dark modes. You can choose from thousands of ready-to-use icons and select from a set of predefined colors. For more Fluent icon resources, check out [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography). NOTE: If you'd like to create custom icons, they should be saved as .pngs (export at 2x) and colored to ensure they look good in both light and dark modes.
* **Build**: Edit, build, preview, and test cards with our Teams Development Portal [Adaptive Card Designer](https://dev.teams.microsoft.com/cards).
diff --git a/samples/author-highlight-video/README.md b/samples/author-highlight-video/README.md
index 19ac3bd..2b2eb52 100644
--- a/samples/author-highlight-video/README.md
+++ b/samples/author-highlight-video/README.md
@@ -2,7 +2,7 @@
## Summary
-Showcase your video content in style with the Author Highlight Video Card. Perfect for a variety of video types including tutorials, interviews, or creative showcases, this card is designed for customization. Add your titles, descriptions, and author info to create a personalized and engaging video experience.
+Showcase your video content in style with the Author Highlight Video Card. Perfect for a variety of video types including tutorials, interviews, or creative showcases, this card is designed for customization. Add your titles, descriptions, and author info to create a personalized and engaging video experience.
_bot-sent_ card example:
@@ -44,9 +44,6 @@ This card utilizes our responsive framework, allowing for multiple layouts or co
Teams provides support for this tool, which is ideal for constructing and modifying cards. Copy the [card](card.json) payload and click on the ‘Open in Designer’ button to start working in the Designer platform.
-> [!NOTE]
-> Responsive layout is not supported in the Designer.
-
_To create a "full width" card, add the following code to the JSON._
```json
@@ -62,11 +59,10 @@ _To create a "full width" card, add the following code to the JSON._
#### 2) Replace the Hero Image
-If you’re creating an image, use a 16:9 aspect ratio. Save the image as a transparent PNG at 2x size to ensure good resolution across endpoints.
+If you’re creating an image, use a 16:9 aspect ratio. Save the image as a transparent PNG at 2x size to ensure good resolution across endpoints. Note: You can add a radius to the image in the Designer to create slightly rounded edges.
* For YouTube, Vimeo, and DailyMotion Inline Media Cards, the “play” button will not need to be added.
* Update the image URL to link to your desired image and specify the URL for the selection action.
-* Note: A radius feature for adding rounded corners to the image is coming soon. In the meantime, you can manually add a 6px radius to the corners.
#### 3) Connect to the Author Image
@@ -79,8 +75,10 @@ Update the copy to capture the information and description for your video.
#### 4) Update Button Copy and Actions
Customize button text and add or remove actions to suit your needs.
-For icons, use the color #818181 to ensure readability in light/dark modes. Icons should fit edge-to-edge in a 16x16 square. Save them as transparent PNGs at 2x size for good resolution across endpoints. Access Fluent icon asset links in the [Resources section](#resources--tools) on this page.
+If you wish to use icons in your button, you can choose from thousands of options in our Fluent icon library. Refer to the [Resources section](#resources--tools) on this page.
+
+Note: For other icons, use the color #818181 to ensure readability in both light and dark modes, or choose a color that you have verified looks good. Icons should fit edge-to-edge within a 16x16 square. Save them as transparent PNGs at 2x size for optimal resolution across different endpoints.
***For further design modifications** use the Microsoft Teams UI Kit in Figma to create, visualize, spec (see current card spec) , and verify the layouts before coding.
@@ -108,10 +106,12 @@ This is where the rubber meets the road to ensure high quality cards for all use
* **Design**: Our tools can help you learn Teams patterns and design apps and cards.
* Design Teams apps and cards with the [The Microsoft Teams UI Kit](https://www.figma.com/community/file/916836509871353159), which has core components, templates, and best practices.
- * Find Microsoft icons from [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography) and modify them to to use in your cards (you'll need to save them out as pngs while we work on building in Fluent icon support).
+
+ * Fluent icons are pre-built into the Designer and support both light and dark modes. You can choose from thousands of ready-to-use icons and select from a set of predefined colors. For more Fluent icon resources, check out [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography). NOTE: If you'd like to create custom icons, they should be saved as .pngs (export at 2x) and colored to ensure they look good in both light and dark modes.
* **Build**: Edit, build, preview, and test cards with our Teams Development Portal [Adaptive Card Designer](https://dev.teams.microsoft.com/cards).
+
## Contribute ##
diff --git a/samples/book-a-room/README.md b/samples/book-a-room/README.md
new file mode 100644
index 0000000..bd30991
--- /dev/null
+++ b/samples/book-a-room/README.md
@@ -0,0 +1,127 @@
+# Book a Room
+
+## Summary
+Streamline your room reservations with the Book a Room Card. Capture essential details like date, duration, and extras like catering options. Highlight the need for a server and use the notes section to cover every important detail.
+
+
+_user-sent_ card example:
+
+
+
+## Compatibility
+
+
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+Course Video | 
[Suz Tocco](https://github.com/SuzanneTocco) 
[Pablo Vicente Astudillo Quintero](https://github.com/pabloas-ms) | Microsoft
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0| Oct 11, 2024 | Initial release
+
+### Disclaimer
+
+_**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**_
+
+## Responsive Layouts
+
+This card utilizes our responsive framework, allowing for multiple layouts or content modifications for specific set width ranges. For more details on coding with this framework, see Design responsive Adaptive Cards.
+
+
+
+
+
+
+## 1) 👩🎨 Personalize This Card
+
+### Step-by-step instructions and tips
+
+#### 1) Copy the card JSON into the Designer Tool
+
+Teams provides support for this tool, which is ideal for constructing and modifying cards. Copy the [card](card.json) payload and click on the ‘Open in Designer’ button to start working in the Designer platform.
+
+_To create a "full width" card, add the following code to the JSON._
+
+```json
+"msTeams": {
+ "width": "full"
+}
+```
+
+
+ 
+
+
+#### 2) Replace the Hero Image
+
+If you’re creating an image, use a 16:9 aspect ratio. Save the image as a transparent PNG at 2x size to ensure good resolution across endpoints.
+
+* For YouTube, Vimeo, and DailyMotion Inline Media Cards, the “play” button will not need to be added.
+* Update the image URL to link to your desired image and specify the URL for the selection action.
+* Note: A radius feature for adding rounded corners to the image is coming soon. In the meantime, you can manually add a 6px radius to the corners.
+
+#### 3) Update Video Information
+
+Modify the details or statistics as desired.
+
+#### 4) Update Button Copy and Actions
+
+Customize button text and add or remove actions to suit your needs.
+For icons, use the color #818181 to ensure readability in light/dark modes. Icons should fit edge-to-edge in a 16x16 square. Save them as transparent PNGs at 2x size for good resolution across endpoints. Access Fluent icon asset links in the [Resources section](#resources--tools) on this page.
+
+
+
+***For further design modifications** use the Microsoft Teams UI Kit in Figma to create, visualize, spec (see current card spec) , and verify the layouts before coding.
+
+
+
+
+
+
+
+## 2) 🚗 Test Your Card
+
+This is where the rubber meets the road to ensure high quality cards for all users across all endpoints. Road test your cards considering the following:
+
+* Themes: Light Mode, Dark Mode, High Contrast
+* Common widths: Chat, Channel, Meeting Chat, Phone (iOS- Portrait/landscape, Android-Portrait/landscape), Tablet (iOS- Portrait/landscape, Android-Portrait/landscape)
+* Accessibility: Color contrast if creating new visuals, tabbing with keyboard or mobile equivelents, Voice assistance (readers to read card content)
+
+
+
+## Implementation Details
+
+* We use responsive layout to render different elements depending on the layout width, for example the shorter text in the agreement toggle for narrow layouts or the `Book a Room` tagged container at the top of the card.
+
+* The title of the card is kept in a container that is wrapped in another that has a background image. To maintain clarity, we change the size of the inner container depending on the layot width.
+
+* We use the `ToggleVisibility` action to show/hide optional form fields; notice also that we're toggling the caret icon as a way to dynamically represent the opened/closed state of the field.
+
+## Resources & Tools ##
+
+* **Learn**: For complete details on how to design and build adaptive cards for your Teams app, visit the Microsoft Teams Learn website pages on [Design Adaptive Cards for Your Teams App](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/design-effective-cards?tabs=design) and [Build Cards](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/what-are-cards) (You can use the [schema explorer](https://adaptivecards.io/explorer/) to learn about the structure and options of each element.
+
+* **Design**: Our tools can help you learn Teams patterns and design apps and cards.
+
+ * Design Teams apps and cards with the [The Microsoft Teams UI Kit](https://www.figma.com/community/file/916836509871353159), which has core components, templates, and best practices.
+
+ * Fluent icons are pre-built into the Designer and support both light and dark modes. You can choose from thousands of ready-to-use icons and select from a set of predefined colors. For more Fluent icon resources, check out [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography). NOTE: If you'd like to create custom icons, they should be saved as .pngs (export at 2x) and colored to ensure they look good in both light and dark modes.
+
+* **Build**: Edit, build, preview, and test cards with our Teams Development Portal [Adaptive Card Designer](https://dev.teams.microsoft.com/cards).
+
+
+
+## Contribute ##
+
+Refer to the [contribution docs](/CONTRIBUTE.md) for more information.
+
+## Help
+
+We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
+
+You can try looking at [issues related to this sample](https://github.com/pnp/AdaptiveCards-Templates/issues) to see if anybody else is having the same issues.
diff --git a/samples/book-a-room/assets/book-a-room-card.png b/samples/book-a-room/assets/book-a-room-card.png
new file mode 100644
index 0000000..c53e355
Binary files /dev/null and b/samples/book-a-room/assets/book-a-room-card.png differ
diff --git a/samples/book-a-room/assets/layouts.png b/samples/book-a-room/assets/layouts.png
new file mode 100644
index 0000000..ed19dc7
Binary files /dev/null and b/samples/book-a-room/assets/layouts.png differ
diff --git a/samples/book-a-room/assets/room_hero.png b/samples/book-a-room/assets/room_hero.png
new file mode 100644
index 0000000..3440c11
Binary files /dev/null and b/samples/book-a-room/assets/room_hero.png differ
diff --git a/samples/book-a-room/assets/spec.png b/samples/book-a-room/assets/spec.png
new file mode 100644
index 0000000..870a924
Binary files /dev/null and b/samples/book-a-room/assets/spec.png differ
diff --git a/samples/book-a-room/card.json b/samples/book-a-room/card.json
new file mode 100644
index 0000000..c683499
--- /dev/null
+++ b/samples/book-a-room/card.json
@@ -0,0 +1,413 @@
+{
+ "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
+ "body": [
+ {
+ "backgroundImage": {
+ "url": "https://raw.githubusercontent.com/suzto/StarterCards/refs/heads/main/samples/book-a-room/assets/room_hero.png",
+ "verticalAlignment": "Bottom"
+ },
+ "items": [
+ {
+ "columns": [
+ {
+ "type": "Column",
+ "width": "stretch"
+ },
+ {
+ "items": [
+ {
+ "items": [
+ {
+ "maxLines": 0,
+ "size": "ExtraLarge",
+ "text": "Book a private meeting room",
+ "type": "TextBlock",
+ "weight": "Bolder",
+ "wrap": true
+ }
+ ],
+ "roundedCorners": true,
+ "style": "default",
+ "type": "Container"
+ }
+ ],
+ "type": "Column",
+ "width": "190px"
+ }
+ ],
+ "targetWidth": "AtLeast:Standard",
+ "type": "ColumnSet"
+ }
+ ],
+ "minHeight": "200px",
+ "roundedCorners": true,
+ "style": "emphasis",
+ "targetWidth": "AtLeast:Standard",
+ "type": "Container",
+ "verticalContentAlignment": "Bottom"
+ },
+ {
+ "backgroundImage": {
+ "url": "https://raw.githubusercontent.com/suzto/StarterCards/refs/heads/main/samples/book-a-room/assets/room_hero.png",
+ "verticalAlignment": "Bottom"
+ },
+ "items": [
+ {
+ "columns": [
+ {
+ "type": "Column",
+ "width": "stretch"
+ },
+ {
+ "items": [
+ {
+ "items": [
+ {
+ "maxLines": 0,
+ "size": "Large",
+ "text": "Book a private meeting room",
+ "type": "TextBlock",
+ "weight": "Bolder",
+ "wrap": true
+ }
+ ],
+ "roundedCorners": true,
+ "style": "default",
+ "type": "Container"
+ }
+ ],
+ "type": "Column",
+ "width": "150px"
+ }
+ ],
+ "type": "ColumnSet"
+ }
+ ],
+ "minHeight": "160px",
+ "roundedCorners": true,
+ "style": "emphasis",
+ "targetWidth": "Narrow",
+ "type": "Container",
+ "verticalContentAlignment": "Bottom"
+ },
+ {
+ "style": "RoundedCorners",
+ "targetWidth": "VeryNarrow",
+ "type": "Image",
+ "url": "https://raw.githubusercontent.com/suzto/StarterCards/refs/heads/main/samples/book-a-room/assets/room_hero.png"
+ },
+ {
+ "columns": [
+ {
+ "items": [
+ {
+ "color": "Accent",
+ "text": "The Rooftop Terrace ",
+ "type": "TextBlock",
+ "weight": "Bolder",
+ "wrap": true
+ }
+ ],
+ "type": "Column",
+ "verticalContentAlignment": "Center",
+ "width": "auto"
+ },
+ {
+ "items": [
+ {
+ "text": "·",
+ "type": "TextBlock"
+ }
+ ],
+ "spacing": "Small",
+ "targetWidth": "AtLeast:Narrow",
+ "type": "Column",
+ "width": "auto",
+ "verticalContentAlignment": "center"
+ },
+ {
+ "items": [
+ {
+ "color": "Accent",
+ "name": "Crown",
+ "size": "xSmall",
+ "type": "Icon"
+ }
+ ],
+ "spacing": "Small",
+ "targetWidth": "AtLeast:Narrow",
+ "type": "Column",
+ "verticalContentAlignment": "Center",
+ "width": "auto"
+ },
+ {
+ "items": [
+ {
+ "isSubtle": true,
+ "size": "Small",
+ "text": "Executive suite",
+ "type": "TextBlock",
+ "wrap": true
+ }
+ ],
+ "spacing": "Small",
+ "targetWidth": "AtLeast:Narrow",
+ "type": "Column",
+ "verticalContentAlignment": "Center",
+ "width": "stretch"
+ }
+ ],
+ "spacing": "Medium",
+ "type": "ColumnSet"
+ },
+ {
+ "columns": [
+ {
+ "items": [
+ {
+ "color": "Accent",
+ "name": "Crown",
+ "size": "xSmall",
+ "type": "Icon"
+ }
+ ],
+ "spacing": "Small",
+ "type": "Column",
+ "verticalContentAlignment": "Center",
+ "width": "auto"
+ },
+ {
+ "items": [
+ {
+ "isSubtle": true,
+ "size": "Small",
+ "text": "Executive suite",
+ "type": "TextBlock",
+ "wrap": true
+ }
+ ],
+ "spacing": "Small",
+ "type": "Column",
+ "verticalContentAlignment": "Center",
+ "width": "stretch"
+ }
+ ],
+ "spacing": "None",
+ "targetWidth": "VeryNarrow",
+ "type": "ColumnSet"
+ },
+ {
+ "items": [
+ {
+ "errorMessage": "Start date is required",
+ "id": "date",
+ "isRequired": true,
+ "label": "Start Date",
+ "type": "Input.Date"
+ },
+ {
+ "errorMessage": "Start time is required",
+ "id": "time",
+ "isRequired": true,
+ "label": "Start Time",
+ "type": "Input.Time"
+ }
+ ],
+ "layouts": [
+ {
+ "columnSpacing": "Small",
+ "itemFit": "Fill",
+ "minItemWidth": "0px",
+ "rowSpacing": "Small",
+ "type": "Layout.Flow"
+ }
+ ],
+ "spacing": "Medium",
+ "type": "Container"
+ },
+ {
+ "choices": [
+ {
+ "title": "1 Hour",
+ "value": "1"
+ },
+ {
+ "title": "2 Hours",
+ "value": "2"
+ },
+ {
+ "title": "3 Hours",
+ "value": "3"
+ }
+ ],
+ "errorMessage": "Duration is required",
+ "id": "duration",
+ "isRequired": true,
+ "label": "Duration",
+ "spacing": "Medium",
+ "type": "Input.ChoiceSet",
+ "value": "1"
+ },
+ {
+ "id": "title",
+ "label": "Meeting or event title",
+ "placeholder": "Enter optional title",
+ "spacing": "Medium",
+ "type": "Input.Text"
+ },
+ {
+ "choices": [
+ {
+ "title": "Lunch buffet",
+ "value": "value1"
+ },
+ {
+ "title": "Dinner with appetizers",
+ "value": "value2"
+ }
+ ],
+ "id": "catering",
+ "label": "Select a catering option",
+ "spacing": "Medium",
+ "style": "expanded",
+ "type": "Input.ChoiceSet"
+ },
+ {
+ "color": "Marigold",
+ "id": "rating",
+ "label": "Rate importance of having catering services",
+ "spacing": "Small",
+ "type": "Input.Rating"
+ },
+ {
+ "columns": [
+ {
+ "items": [
+ {
+ "inlines": [
+ {
+ "selectAction": {
+ "targetElements": ["notes", "chevronUp", "chevronDown"],
+ "type": "Action.ToggleVisibility"
+ },
+ "text": "Add notes or requests",
+ "type": "TextRun"
+ }
+ ],
+ "targetWidth": "AtLeast:Narrow",
+ "type": "RichTextBlock"
+ },
+ {
+ "inlines": [
+ {
+ "selectAction": {
+ "targetElements": ["notes", "chevronUp", "chevronDown"],
+ "type": "Action.ToggleVisibility"
+ },
+ "text": "Additional options",
+ "type": "TextRun"
+ }
+ ],
+ "spacing": "None",
+ "targetWidth": "VeryNarrow",
+ "type": "RichTextBlock"
+ }
+ ],
+ "type": "Column",
+ "verticalContentAlignment": "Center",
+ "width": "auto"
+ },
+ {
+ "items": [
+ {
+ "color": "Accent",
+ "id": "chevronDown",
+ "name": "ChevronDown",
+ "size": "xxSmall",
+ "type": "Icon"
+ },
+ {
+ "color": "Accent",
+ "id": "chevronUp",
+ "isVisible": false,
+ "name": "ChevronUp",
+ "size": "xxSmall",
+ "spacing": "None",
+ "type": "Icon"
+ }
+ ],
+ "selectAction": {
+ "targetElements": ["notes", "chevronUp", "chevronDown"],
+ "type": "Action.ToggleVisibility"
+ },
+ "spacing": "Small",
+ "type": "Column",
+ "verticalContentAlignment": "Center",
+ "width": "stretch"
+ }
+ ],
+ "spacing": "Medium",
+ "type": "ColumnSet"
+ },
+ {
+ "id": "notes",
+ "isMultiline": true,
+ "isVisible": false,
+ "placeholder": "Enter any additional notes or requests",
+ "spacing": "Small",
+ "type": "Input.Text"
+ },
+ {
+ "columns": [
+ {
+ "width": "1",
+ "items": [
+ {
+ "title": "",
+ "id": "policy",
+ "type": "Input.Toggle"
+ }
+ ],
+ "verticalContentAlignment": "center",
+ "type": "Column"
+ },
+ {
+ "width": "5",
+ "items": [
+ {
+ "text": "By continuing, you acknowledge that you've read and accepted our [booking policy](https://github.com/OfficeDev/Microsoft-Teams-Adaptive-Card-Samples).",
+ "wrap": true,
+ "targetWidth": "AtLeast:Narrow",
+ "type": "TextBlock"
+ },
+ {
+ "text": "I've read and accept the [booking policy](https://github.com/OfficeDev/Microsoft-Teams-Adaptive-Card-Samples).",
+ "wrap": true,
+ "targetWidth": "VeryNarrow",
+ "type": "TextBlock"
+ }
+ ],
+ "verticalContentAlignment": "center",
+ "spacing": "Small",
+ "type": "Column"
+ }
+ ],
+ "separator": true,
+ "type": "ColumnSet"
+ },
+ {
+ "actions": [
+ {
+ "style": "positive",
+ "title": "Submit",
+ "type": "Action.Submit"
+ }
+ ],
+ "separator": true,
+ "spacing": "Medium",
+ "type": "ActionSet"
+ }
+ ],
+ "type": "AdaptiveCard",
+ "version": "1.5"
+}
diff --git a/samples/catalog.json b/samples/catalog.json
index df60fee..52f1a08 100644
--- a/samples/catalog.json
+++ b/samples/catalog.json
@@ -1,49 +1,59 @@
{
- "samples": [
- {
- "name": "Account",
- "description": "The Account Card is designed to give you a strategic edge by providing a high-level summary of each sales opportunity. It neatly displays the company name, opportunity status, estimated revenue, and account owner, with intuitive buttons that invite further exploration and engagement.",
- "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/account/card.json"
- },
- {
- "name": "Author Highlight Video",
- "description": "Showcase your video content in style with the Author Highlight Video Card. Perfect for a variety of video types including tutorials, interviews, or creative showcases, this card is designed for customization. Add your titles, descriptions, and author info to create a personalized and engaging video experience.",
- "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/author-highlight-video/card.json"
- },
- {
- "name": "Communication",
- "description": "The Communications Card is your gateway to vibrant social connectivity. Ideal for broadcasting company updates, sharing posts, or fostering community ties, this card is versatile enough to match your messaging. Enrich it with custom text, imagery, and links for an immersive social journey.",
- "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/communication/card.json"
- },
- {
- "name": "Course Video",
- "description": "The Course Video Card is a versatile and robust card designed to serve as an individual component or hub for video or learning content. Whether you’re offering a series of courses, tutorials, or informative clips, this card can be tailored to your specific needs. Customize titles, descriptions, and author information to create engaging viewing experiences.",
- "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/course-video/card.json"
- },
- {
- "name": "Issue",
- "description": "Streamline your workflow with the Issue Card template, tracking and managing issues becomes seamless. It presents key insights such as current status and assigned owner, all customizable to include the specifics of your project’s needs.",
- "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/issue/card.json"
- },
- {
- "name": "List",
- "description": "The List Card is your digital curator, elegantly organizing a personalized selection of content. From insightful articles to engaging videos and comprehensive courses, this card spotlights the essentials. Simply click to delve into a topic or expand your horizon within the app.",
- "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/list/card.json"
- },
- {
- "name": "Recipe",
- "description": "Draw in your audience with the Recipe Card (AKA Hero Showcase Card), where a captivating image sets the stage for your featured content. Whether it’s a recipe or a special feature, users can expand the card to uncover the full story at their leisure.",
- "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/recipe/card.json"
- },
- {
- "name": "Standard Video",
- "description": "The Standard Video Card prioritizes brevity without sacrificing functionality. Whether you’re after tech insights or artistic inspiration, this card delivers. Discover additional choices—bookmark, share, or dive into more content—from the overflow menu.",
- "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/standard-video/card.json"
- },
- {
- "name": "Work Item Thumbnail",
- "description": "The Work Item Thumbnail Card is a testament to the power of simplicity. Its streamlined design and small visual accent work together to present information efficiently, ensuring your message is understood at a glance.",
- "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/work_item/card.json"
- }
- ]
-}
\ No newline at end of file
+ "samples": [
+ {
+ "name": "Account",
+ "description": "The Account Card is designed to give you a strategic edge by providing a high-level summary of each sales opportunity. It neatly displays the company name, opportunity status, estimated revenue, and account owner, with intuitive buttons that invite further exploration and engagement.",
+ "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/account/card.json"
+ },
+ {
+ "name": "Author Highlight Video",
+ "description": "Showcase your video content in style with the Author Highlight Video Card. Perfect for a variety of video types including tutorials, interviews, or creative showcases, this card is designed for customization. Add your titles, descriptions, and author info to create a personalized and engaging video experience.",
+ "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/author-highlight-video/card.json"
+ },
+ {
+ "name": "Communication",
+ "description": "The Communications Card is your gateway to vibrant social connectivity. Ideal for broadcasting company updates, sharing posts, or fostering community ties, this card is versatile enough to match your messaging. Enrich it with custom text, imagery, and links for an immersive social journey.",
+ "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/communication/card.json"
+ },
+ {
+ "name": "Course Video",
+ "description": "The Course Video Card is a versatile and robust card designed to serve as an individual component or hub for video or learning content. Whether you’re offering a series of courses, tutorials, or informative clips, this card can be tailored to your specific needs. Customize titles, descriptions, and author information to create engaging viewing experiences.",
+ "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/course-video/card.json"
+ },
+ {
+ "name": "Issue",
+ "description": "Streamline your workflow with the Issue Card template, tracking and managing issues becomes seamless. It presents key insights such as current status and assigned owner, all customizable to include the specifics of your project’s needs.",
+ "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/issue/card.json"
+ },
+ {
+ "name": "List",
+ "description": "The List Card is your digital curator, elegantly organizing a personalized selection of content. From insightful articles to engaging videos and comprehensive courses, this card spotlights the essentials. Simply click to delve into a topic or expand your horizon within the app.",
+ "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/list/card.json"
+ },
+ {
+ "name": "Recipe",
+ "description": "Draw in your audience with the Recipe Card (AKA Hero Showcase Card), where a captivating image sets the stage for your featured content. Whether it’s a recipe or a special feature, users can expand the card to uncover the full story at their leisure.",
+ "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/recipe/card.json"
+ },
+ {
+ "name": "Standard Video",
+ "description": "The Standard Video Card prioritizes brevity without sacrificing functionality. Whether you’re after tech insights or artistic inspiration, this card delivers. Discover additional choices—bookmark, share, or dive into more content—from the overflow menu.",
+ "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/standard-video/card.json"
+ },
+ {
+ "name": "Work Item Thumbnail",
+ "description": "The Work Item Thumbnail Card is a testament to the power of simplicity. Its streamlined design and small visual accent work together to present information efficiently, ensuring your message is understood at a glance.",
+ "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/work_item/card.json"
+ },
+ {
+ "name": "Time Off Request",
+ "description": "Time off request description TODO.",
+ "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/time-off-request/card.json"
+ },
+ {
+ "name": "Expense Report",
+ "description": "Expense report description TODO.",
+ "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/expense-report/card.json"
+ }
+ ]
+}
diff --git a/samples/communication/README.md b/samples/communication/README.md
index 15ff479..1db068e 100644
--- a/samples/communication/README.md
+++ b/samples/communication/README.md
@@ -2,7 +2,7 @@
## Summary
-The Communications Card is your gateway to vibrant social connectivity. Ideal for broadcasting company updates, sharing posts, or fostering community ties, this card is versatile enough to match your messaging. Enrich it with custom text, imagery, and links for an immersive social journey.
+The Communications Card is your gateway to vibrant social connectivity. Ideal for broadcasting company updates, sharing posts, or fostering community ties, this card is versatile enough to match your messaging. Enrich it with custom text, imagery, and links for an immersive social journey.
_bot-sent_ card example:
@@ -44,9 +44,6 @@ This card utilizes our responsive framework, allowing for multiple layouts or co
Teams provides support for this tool, which is ideal for constructing and modifying cards. Copy the [card](card.json) payload and click on the ‘Open in Designer’ button to start working in the Designer platform.
-> [!NOTE]
-> Responsive layout is not supported in the Designer.
-
_To create a "full width" card, add the following code to the JSON._
```json
@@ -63,9 +60,7 @@ _To create a "full width" card, add the following code to the JSON._
#### 2) Replace the Hero Image
-If you’re creating an image, save the image as a transparent PNG at 2x size to ensure good resolution across endpoints. Keep the image slightly taller vertically to leave ample room for the copy.
-
-* Note: A radius feature for adding rounded corners to the image is coming soon. In the meantime, you can manually add a 6px radius to the corners.
+If you’re creating an image, save the image as a transparent PNG at 2x size to ensure good resolution across endpoints. Keep the image slightly taller vertically to leave ample room for the copy. Note: You can add a radius to the image in the Designer to create slightly rounded edges.
#### 3) Link to the Avatar Image
@@ -79,9 +74,11 @@ Set the maximum line truncation as desired to work for the card content and layo
#### 5) Update Button Copy and Actions
-Customize button text and actions to suit your needs.
-For icons, use the color #818181 to ensure readability in light/dark modes. Icons should fit edge-to-edge in a 16x16 square. Save them as transparent PNGs at 2x size for good resolution across endpoints. Access Fluent icon asset links in the [Resources section](#resources--tools) on this page.
+Customize button text and add or remove actions to suit your needs.
+If you wish to use icons in your button, you can choose from thousands of options in our Fluent icon library. Refer to the [Resources section](#resources--tools) on this page.
+
+Note: For other icons, use the color #818181 to ensure readability in both light and dark modes, or choose a color that you have verified looks good. Icons should fit edge-to-edge within a 16x16 square. Save them as transparent PNGs at 2x size for optimal resolution across different endpoints.
***For further design modifications** use the Microsoft Teams UI Kit in Figma to create, visualize, spec (see current card spec) , and verify the layouts before coding.
@@ -109,7 +106,8 @@ This is where the rubber meets the road to ensure high quality cards for all use
* **Design**: Our tools can help you learn Teams patterns and design apps and cards.
* Design Teams apps and cards with the [The Microsoft Teams UI Kit](https://www.figma.com/community/file/916836509871353159), which has core components, templates, and best practices.
- * Find Microsoft icons from [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography) and modify them to to use in your cards (you'll need to save them out as pngs while we work on building in Fluent icon support).
+
+ * Fluent icons are pre-built into the Designer and support both light and dark modes. You can choose from thousands of ready-to-use icons and select from a set of predefined colors. For more Fluent icon resources, check out [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography). NOTE: If you'd like to create custom icons, they should be saved as .pngs (export at 2x) and colored to ensure they look good in both light and dark modes.
* **Build**: Edit, build, preview, and test cards with our Teams Development Portal [Adaptive Card Designer](https://dev.teams.microsoft.com/cards).
diff --git a/samples/course-video/README.md b/samples/course-video/README.md
index eb18a13..20fbf5b 100644
--- a/samples/course-video/README.md
+++ b/samples/course-video/README.md
@@ -2,7 +2,7 @@
## Summary
-The Course Video Card is a versatile and robust card designed to serve as an individual component or hub for video or learning content. Whether you’re offering a series of courses, tutorials, or informative clips, this card can be tailored to your specific needs. Customize titles, descriptions, and author information to create engaging viewing experiences.
+The Course Video Card is a versatile and robust card designed to serve as an individual component or hub for video or learning content. Whether you’re offering a series of courses, tutorials, or informative clips, this card can be tailored to your specific needs. Customize titles, descriptions, and author information to create engaging viewing experiences.
_bot-sent_ card example:
@@ -49,9 +49,6 @@ Below you'll find a few alternative expressions of the card.
Teams provides support for this tool, which is ideal for constructing and modifying cards. Copy the [card](card.json) payload and click on the ‘Open in Designer’ button to start working in the Designer platform.
-> [!NOTE]
-> Responsive layout is not supported in the Designer.
-
_To create a "full width" card, add the following code to the JSON._
```json
@@ -66,11 +63,10 @@ _To create a "full width" card, add the following code to the JSON._
#### 2) Replace the Hero Image
-If you’re creating an image, use a 16:9 aspect ratio. Save the image as a transparent PNG at 2x size to ensure good resolution across endpoints.
+If you’re creating an image, use a 16:9 aspect ratio. Save the image as a transparent PNG at 2x size to ensure good resolution across endpoints.Note: You can add a radius to the image in the Designer to create slightly rounded edges.
* For YouTube, Vimeo, and DailyMotion Inline Media Cards, the “play” button will not need to be added.
* Update the image URL to link to your desired image and specify the URL for the selection action.
-* Note: A radius feature for adding rounded corners to the image is coming soon. In the meantime, you can manually add a 6px radius to the corners.
#### 3) Replace the Author/Company Logo
@@ -82,9 +78,11 @@ Set the maximum line truncation as desired. You can choose to keep or remove the
#### 5) Update Button Copy and Actions
-Customize button text and actions to suit your needs.
-For icons, use the color #818181 to ensure readability in light/dark modes. Icons should fit edge-to-edge in a 16x16 square. Save them as transparent PNGs at 2x size for good resolution across endpoints. Access Fluent icon asset links in the [Resources section](#resources--tools) on this page.
+Customize button text and add or remove actions to suit your needs.
+If you wish to use icons in your button, you can choose from thousands of options in our Fluent icon library. Refer to the [Resources section](#resources--tools) on this page.
+
+Note: For other icons, use the color #818181 to ensure readability in both light and dark modes, or choose a color that you have verified looks good. Icons should fit edge-to-edge within a 16x16 square. Save them as transparent PNGs at 2x size for optimal resolution across different endpoints.
***For further design modifications** use the Microsoft Teams UI Kit in Figma to create, visualize, spec (see current card spec) , and verify the layouts before coding.
@@ -110,7 +108,8 @@ This marks the critical point where we ensure that our cards maintain superior q
* **Design**: Our tools can help you learn Teams patterns and design apps and cards.
* Design Teams apps and cards with the [The Microsoft Teams UI Kit](https://www.figma.com/community/file/916836509871353159), which has core components, templates, and best practices.
- * Find Microsoft icons from [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography) and modify them to to use in your cards (you'll need to save them out as pngs while we work on building in Fluent icon support).
+
+ * Fluent icons are pre-built into the Designer and support both light and dark modes. You can choose from thousands of ready-to-use icons and select from a set of predefined colors. For more Fluent icon resources, check out [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography). NOTE: If you'd like to create custom icons, they should be saved as .pngs (export at 2x) and colored to ensure they look good in both light and dark modes.
* **Build**: Edit, build, preview, and test cards with our Teams Development Portal [Adaptive Card Designer](https://dev.teams.microsoft.com/cards).
diff --git a/samples/expense-report/README.md b/samples/expense-report/README.md
new file mode 100644
index 0000000..ea6c267
--- /dev/null
+++ b/samples/expense-report/README.md
@@ -0,0 +1,124 @@
+# Expense Report
+
+## Summary
+
+Introducing the Expense Report Card, a practical tool for handling expense requests. This card provides a clear view of each expense, with easy expand and collapse options for navigation. See who approved the expense, and stay informed with comments and attached files. Streamline your approval process and keep everything organized with this essential tool.
+
+_bot-sent_ card example:
+
+
+
+## Compatibility
+
+
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+Expense Report | [Suz Tocco](https://github.com/SuzanneTocco) [Pablo Vicente Astudillo Quintero](https://github.com/pabloas-ms) | Microsoft
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0| October 4, 2024 | Initial release
+
+### Disclaimer
+
+_**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**_
+
+## Responsive Layouts
+
+This card utilizes our responsive framework, allowing for multiple layouts or content modifications for specific set width ranges. For more details on coding with this framework, see Design responsive Adaptive Cards.
+
+
+
+
+
+
+## 1) 👩🎨 Personalize This Card
+
+### Step-by-step instructions and tips
+
+#### 1) Copy the card JSON into the Designer Tool
+
+Teams provides support for this tool, which is ideal for constructing and modifying cards. Copy the [card](card.json) payload and click on the ‘Open in Designer’ button to start working in the Designer platform.
+
+_To create a "full width" card, add the following code to the JSON._
+
+```json
+"msTeams": {
+ "width": "full"
+}
+```
+
+
+
+
+
+#### 2) Update Images
+
+For thumbnail images, use a square aspect ratio. Save the image as a transparent PNG at 2x size to ensure high resolution across endpoints.
+Note: You can add a radius to the image in the Designer to create slightly rounded edges.
+
+* Update the image URL to link to your desired image.
+* Update the image URL to link to the approving expense administrator.
+
+
+#### 3) Connect to Proper Data
+
+Ensure the card pulls the correct expense details.
+
+#### 4) Update Button Copy and Actions
+
+Customize button text and add or remove actions to suit your needs.
+If you wish to use icons in your button, you can choose from thousands of options in our Fluent icon library. Refer to the [Resources section](#resources--tools) on this page.
+
+
+Note: For other icons, use the color #818181 to ensure readability in both light and dark modes, or choose a color that you have verified looks good. Icons should fit edge-to-edge within a 16x16 square. Save them as transparent PNGs at 2x size for optimal resolution across different endpoints.
+
+
+***For further design modifications** use the Microsoft Teams UI Kit in Figma to create, visualize, spec (see current card spec) , and verify the layouts before coding.
+
+
+
+
+
+
+
+## 2) 🚗 Test Your Card
+
+This is where the rubber meets the road to ensure high quality cards for all users across all endpoints. Road test your cards considering the following:
+
+* Themes: Light Mode, Dark Mode, High Contrast
+* Common widths: Chat, Channel, Meeting Chat, Phone (iOS- Portrait/landscape, Android-Portrait/landscape), Tablet (iOS- Portrait/landscape, Android-Portrait/landscape)
+* Accessibility: Color contrast if creating new visuals, tabbing with keyboard or mobile equivelents, Voice assistance (readers to read card content)
+
+
+
+## Implementation Details
+
+* We use responsive layout to move the text locations vertically so it's not squished in the `veryNarrow` width.
+
+* We use the `ToggleVisibility` action to show/hide additional information; notice also that we're toggling the caret icon as a way to dynamically represent the opened/closed state.
+
+## Resources & Tools ##
+
+* **Learn**: For complete details on how to design and build adaptive cards for your Teams app, visit the Microsoft Teams Learn website pages on [Design Adaptive Cards for Your Teams App](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/design-effective-cards?tabs=design) and [Build Cards](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/what-are-cards) (You can use the [schema explorer](https://adaptivecards.io/explorer/) to learn about the structure and options of each element.
+
+* **Design**: Our tools can help you learn Teams patterns and design apps and cards.
+
+ * Design Teams apps and cards with the [The Microsoft Teams UI Kit](https://www.figma.com/community/file/916836509871353159), which has core components, templates, and best practices.
+
+ * Fluent icons are pre-built into the Designer and support both light and dark modes. You can choose from thousands of ready-to-use icons and select from a set of predefined colors. For more Fluent icon resources, check out [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography). NOTE: If you'd like to create custom icons, they should be saved as .pngs (export at 2x) and colored to ensure they look good in both light and dark modes.
+
+* **Build**: Edit, build, preview, and test cards with our Teams Development Portal [Adaptive Card Designer](https://dev.teams.microsoft.com/cards).
+
+
+
+## Contribute ##
+
+Refer to the [contribution docs](/CONTRIBUTE.md) for more information.
+
+
diff --git a/samples/expense-report/assets/Avatar.png b/samples/expense-report/assets/Avatar.png
new file mode 100644
index 0000000..1884014
Binary files /dev/null and b/samples/expense-report/assets/Avatar.png differ
diff --git a/samples/expense-report/assets/card_layouts.png b/samples/expense-report/assets/card_layouts.png
new file mode 100644
index 0000000..bc193fa
Binary files /dev/null and b/samples/expense-report/assets/card_layouts.png differ
diff --git a/samples/expense-report/assets/expense-report-card.png b/samples/expense-report/assets/expense-report-card.png
new file mode 100644
index 0000000..26bcbd9
Binary files /dev/null and b/samples/expense-report/assets/expense-report-card.png differ
diff --git a/samples/expense-report/assets/expense-report-spec.png b/samples/expense-report/assets/expense-report-spec.png
new file mode 100644
index 0000000..8ce1375
Binary files /dev/null and b/samples/expense-report/assets/expense-report-spec.png differ
diff --git a/samples/expense-report/assets/seattle.png b/samples/expense-report/assets/seattle.png
new file mode 100644
index 0000000..bcd7706
Binary files /dev/null and b/samples/expense-report/assets/seattle.png differ
diff --git a/samples/expense-report/card.json b/samples/expense-report/card.json
new file mode 100644
index 0000000..aabcaae
--- /dev/null
+++ b/samples/expense-report/card.json
@@ -0,0 +1,645 @@
+{
+ "type": "AdaptiveCard",
+ "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
+ "version": "1.5",
+ "body": [
+ {
+ "type": "TextBlock",
+ "text": "Your 'Travel to Seattle' expenses have been approved!",
+ "wrap": true,
+ "size": "Large",
+ "weight": "Bolder"
+ },
+ {
+ "type": "Container",
+ "targetWidth": "VeryNarrow",
+ "items": [
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Image",
+ "width": "44px",
+ "height": "44px",
+ "url": "https://github.com/OfficeDev/Microsoft-Teams-Card-Samples/blob/pabloas/set-2/samples/expense-report/assets/seattle.png?raw=true",
+ "style": "RoundedCorners",
+ "altText": ""
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Travel to Seattle",
+ "wrap": true,
+ "weight": "Bolder"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "CheckmarkCircle",
+ "size": "xxSmall",
+ "color": "Good"
+ }
+ ],
+ "verticalContentAlignment": "Center"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Approved",
+ "wrap": true,
+ "size": "Small",
+ "weight": "Bolder",
+ "color": "Good"
+ }
+ ],
+ "spacing": "None",
+ "verticalContentAlignment": "Center"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "TextBlock",
+ "text": "Fri, 7 Aug 2024 - Tue, 21 Aug 2024",
+ "wrap": true,
+ "size": "Small",
+ "isSubtle": false,
+ "color": "Default",
+ "weight": "Bolder",
+ "spacing": "ExtraSmall"
+ },
+ {
+ "type": "TextBlock",
+ "text": "Business trip to meet client to sign final contracts.",
+ "wrap": true,
+ "spacing": "ExtraSmall",
+ "size": "Small",
+ "isSubtle": true
+ }
+ ],
+ "separator": true,
+ "spacing": "Medium"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Image",
+ "width": "44px",
+ "height": "44px",
+ "url": "https://github.com/OfficeDev/Microsoft-Teams-Card-Samples/blob/pabloas/set-2/samples/expense-report/assets/seattle.png?raw=true",
+ "style": "RoundedCorners",
+ "altText": ""
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Travel to Seattle",
+ "wrap": true,
+ "weight": "Bolder"
+ }
+ ],
+ "verticalContentAlignment": "Bottom"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "CheckmarkCircle",
+ "size": "xxSmall",
+ "color": "Good"
+ }
+ ],
+ "verticalContentAlignment": "Center"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Approved",
+ "wrap": true,
+ "size": "Small",
+ "weight": "Bolder",
+ "color": "Good"
+ }
+ ],
+ "spacing": "None",
+ "verticalContentAlignment": "Center"
+ }
+ ]
+ },
+ {
+ "type": "TextBlock",
+ "text": "Fri, 7 Aug 2024 - Tue, 21 Aug 2024",
+ "wrap": true,
+ "size": "Small",
+ "isSubtle": false,
+ "weight": "Bolder",
+ "color": "Default",
+ "spacing": "ExtraSmall"
+ },
+ {
+ "type": "TextBlock",
+ "text": "Business trip to meet client to sign final contracts.",
+ "wrap": true,
+ "spacing": "ExtraSmall",
+ "isSubtle": true,
+ "size": "Small"
+ }
+ ]
+ }
+ ],
+ "targetWidth": "AtLeast:Narrow",
+ "spacing": "Medium"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "Receipt",
+ "size": "xxSmall"
+ }
+ ],
+ "verticalContentAlignment": "Center"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "2",
+ "wrap": true,
+ "size": "Small",
+ "weight": "Bolder",
+ "color": "Default"
+ }
+ ],
+ "spacing": "ExtraSmall",
+ "verticalContentAlignment": "Center"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "Comment",
+ "size": "xxSmall"
+ }
+ ],
+ "verticalContentAlignment": "Center"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "4",
+ "wrap": true,
+ "size": "Small",
+ "weight": "Bolder",
+ "color": "Default"
+ }
+ ],
+ "spacing": "ExtraSmall",
+ "verticalContentAlignment": "Center"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "$790.00",
+ "wrap": true,
+ "weight": "Bolder",
+ "size": "Small"
+ }
+ ],
+ "spacing": "Medium",
+ "verticalContentAlignment": "Center"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "ChevronDown",
+ "size": "xSmall",
+ "selectAction": {
+ "type": "Action.ToggleVisibility",
+ "targetElements": ["reimbursement", "chevronUp", "chevronDown"]
+ },
+ "id": "chevronDown"
+ },
+ {
+ "type": "Icon",
+ "name": "ChevronUp",
+ "size": "xSmall",
+ "selectAction": {
+ "type": "Action.ToggleVisibility",
+ "targetElements": ["reimbursement", "chevronUp", "chevronDown"]
+ },
+ "id": "chevronUp",
+ "isVisible": false
+ }
+ ],
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "horizontalAlignment": "Right",
+ "spacing": "ExtraLarge",
+ "separator": true
+ },
+ {
+ "type": "Container",
+ "style": "emphasis",
+ "roundedCorners": true,
+ "showBorder": true,
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Reimbursement #238-29",
+ "wrap": true,
+ "size": "Small"
+ },
+ {
+ "type": "Container",
+ "items": [
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto"
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Receipts and itineraries",
+ "wrap": true,
+ "size": "Small"
+ },
+ {
+ "type": "TextBlock",
+ "text": "$890.00",
+ "wrap": true,
+ "targetWidth": "VeryNarrow",
+ "weight": "Bolder",
+ "spacing": "ExtraSmall",
+ "size": "Small"
+ }
+ ],
+ "spacing": "Small"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "horizontalAlignment": "Right",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "$890.00",
+ "wrap": true,
+ "weight": "Bolder",
+ "size": "Small"
+ }
+ ],
+ "targetWidth": "AtLeast:Narrow"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "spacing": "Small"
+ }
+ ]
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto"
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Non-reimbursable amount",
+ "wrap": true,
+ "size": "Small"
+ },
+ {
+ "type": "TextBlock",
+ "text": "$100.00",
+ "wrap": true,
+ "weight": "Bolder",
+ "spacing": "ExtraSmall",
+ "targetWidth": "VeryNarrow",
+ "size": "Small"
+ }
+ ],
+ "spacing": "Small"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "horizontalAlignment": "Right",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "$100.00",
+ "wrap": true,
+ "weight": "Bolder",
+ "size": "Small"
+ }
+ ],
+ "targetWidth": "AtLeast:Narrow"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "spacing": "Small"
+ }
+ ],
+ "separator": true
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto"
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Cash advance",
+ "wrap": true,
+ "size": "Small"
+ },
+ {
+ "type": "TextBlock",
+ "text": "$50.00",
+ "wrap": true,
+ "spacing": "ExtraSmall",
+ "weight": "Bolder",
+ "targetWidth": "VeryNarrow",
+ "size": "Small"
+ }
+ ],
+ "spacing": "Small"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "horizontalAlignment": "Right",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "$50.00",
+ "wrap": true,
+ "weight": "Bolder",
+ "size": "Small"
+ }
+ ],
+ "targetWidth": "AtLeast:Narrow"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "spacing": "Small"
+ }
+ ],
+ "separator": true
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto"
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "CheckmarkCircle",
+ "size": "xxSmall",
+ "color": "Good",
+ "spacing": "None"
+ }
+ ],
+ "targetWidth": "AtLeast:Narrow",
+ "spacing": "None"
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Total reimbursement",
+ "wrap": true,
+ "weight": "Bolder",
+ "size": "Small",
+ "spacing": "None"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "spacing": "None"
+ },
+ {
+ "type": "ColumnSet",
+ "spacing": "ExtraSmall",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "CheckmarkCircle",
+ "size": "xxSmall",
+ "color": "Good"
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "$790.00",
+ "wrap": true,
+ "weight": "Bolder",
+ "size": "Small"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "targetWidth": "VeryNarrow"
+ }
+ ],
+ "spacing": "Small"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "horizontalAlignment": "Right",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "$790.00",
+ "wrap": true,
+ "weight": "Bolder",
+ "size": "Small"
+ }
+ ],
+ "targetWidth": "AtLeast:Narrow"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "spacing": "Small"
+ }
+ ],
+ "separator": true
+ }
+ ],
+ "style": "default",
+ "roundedCorners": true
+ }
+ ],
+ "id": "reimbursement",
+ "spacing": "Small",
+ "isVisible": false
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Image",
+ "style": "Person",
+ "url": "https://github.com/OfficeDev/Microsoft-Teams-Card-Samples/blob/pabloas/set-2/samples/expense-report/assets/Avatar.png?raw=true",
+ "width": "24px",
+ "height": "24px",
+ "altText": ""
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "RichTextBlock",
+ "inlines": [
+ {
+ "type": "TextRun",
+ "text": "Approved by ",
+ "size": "Small"
+ },
+ {
+ "type": "TextRun",
+ "text": "Mona Kane",
+ "size": "Small",
+ "weight": "Bolder"
+ }
+ ]
+ }
+ ],
+ "verticalContentAlignment": "Center"
+ }
+ ],
+ "spacing": "ExtraLarge",
+ "separator": true
+ },
+ {
+ "type": "ActionSet",
+ "spacing": "Large",
+ "actions": [
+ {
+ "type": "Action.OpenUrl",
+ "title": "View statement",
+ "url": "https://github.com/OfficeDev/Microsoft-Teams-Adaptive-Card-Samples"
+ }
+ ]
+ }
+ ]
+}
diff --git a/samples/issue/README.md b/samples/issue/README.md
index 0342bb0..718149b 100644
--- a/samples/issue/README.md
+++ b/samples/issue/README.md
@@ -51,9 +51,6 @@ Below you'll find a few alternative expressions of the card.
Teams provides support for this tool, which is ideal for constructing and modifying cards. Copy the [card](card.json) payload and click on the ‘Open in Designer’ button to start working in the Designer platform.
-> [!NOTE]
-> Responsive layout is not supported in the Designer.
-
_To create a "full width" card, add the following code to the JSON._
```json
@@ -74,14 +71,18 @@ Ensure that the primary path name is correctly hyperlinked to the corresponding
#### 3) Imagery Update and Verification
-Please substitute the current 28x28 pixel square image. In the event of crafting a new image, ensure it is saved as a transparent PNG at double the size while maintaining a 16x16 pixel fixed width. Establish the correct pathways to source the avatar image, which should be 20x20 pixels, and incorporate or retrieve any necessary icons for the status sections, which are 16x16 pixels within a 20x20 pixel framework.
+Please substitute the current 28x28 pixel square image with an image you create or one of our built-in Fluent icons. In the event of crafting a new image, ensure it is saved as a transparent PNG at double the size. Establish the correct pathways to source the avatar image, which should be 20x20 pixels, and incorporate or create any necessary icons for the status sections, which are 16x16 pixels within a 20x20 pixel framework.
Note: It’s important to conduct tests on any icons to verify their visibility and clarity in both light and dark interface themes.
#### 4) Update Button Copy and Actions
-Customize button text and actions to suit your needs.
-For icons, use the color #818181 to ensure readability in light/dark modes. Icons should fit edge-to-edge in a 16x16 square. Save them as transparent PNGs at 2x size for good resolution across endpoints. Access Fluent icon asset links in the [Resources section](#resources--tools) on this page.
+Customize button text and add or remove actions to suit your needs.
+If you wish to use icons in your button, you can choose from thousands of options in our Fluent icon library. Refer to the [Resources section](#resources--tools) on this page.
+
+
+Note: For other icons, use the color #818181 to ensure readability in both light and dark modes, or choose a color that you have verified looks good. Icons should fit edge-to-edge within a 16x16 square. Save them as transparent PNGs at 2x size for optimal resolution across different endpoints.
+
***For further design modifications** use the Microsoft Teams UI Kit in Figma to create, visualize, spec (see current card spec) , and verify the layouts before coding.
@@ -107,7 +108,8 @@ This is where the rubber meets the road to ensure high quality cards for all use
* **Design**: Our tools can help you learn Teams patterns and design apps and cards.
* Design Teams apps and cards with the [The Microsoft Teams UI Kit](https://www.figma.com/community/file/916836509871353159), which has core components, templates, and best practices.
- * Find Microsoft icons from [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography) and modify them to to use in your cards (you'll need to save them out as pngs while we work on building in Fluent icon support).
+
+ * Fluent icons are pre-built into the Designer and support both light and dark modes. You can choose from thousands of ready-to-use icons and select from a set of predefined colors. For more Fluent icon resources, check out [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography). NOTE: If you'd like to create custom icons, they should be saved as .pngs (export at 2x) and colored to ensure they look good in both light and dark modes.
* **Build**: Edit, build, preview, and test cards with our Teams Development Portal [Adaptive Card Designer](https://dev.teams.microsoft.com/cards).
diff --git a/samples/list/README.md b/samples/list/README.md
index f9eb8dc..e771069 100644
--- a/samples/list/README.md
+++ b/samples/list/README.md
@@ -44,9 +44,6 @@ This card utilizes our responsive framework, allowing for multiple layouts or co
Teams provides support for this tool, which is ideal for constructing and modifying cards. Copy the [card](card.json) payload and click on the ‘Open in Designer’ button to start working in the Designer platform.
-> [!NOTE]
-> Responsive layout is not supported in the Designer.
-
_To create a "full width" card, add the following code to the JSON._
```json
@@ -63,9 +60,7 @@ _To create a "full width" card, add the following code to the JSON._
#### 2) Replace the Hero Images
-If you’re creating an image, save the image as a transparent PNG at 2x size to ensure good resolution across endpoints. Keep the image small and square to leave ample room for the copy. Add a "Play" button graphic on top of video representations (included in assets folder).
-
-* Note: A radius feature for adding rounded corners to the image is coming soon. In the meantime, you can manually add a 4px radius to the corners.
+If you’re creating an image, save the image as a transparent PNG at 2x size to ensure good resolution across endpoints. Keep the image small and square to leave ample room for the copy. Add a "Play" button graphic on top of video representations (included in assets folder). Note: You can add a radius to the image in the Designer to create slightly rounded edges.
#### 3) Link to Associated Content
@@ -76,10 +71,11 @@ Point to the appropriate URL from the content blocks.
Keep the descriptions small if possible, and set the maximum line truncation if needed to work for the card content and layout.
#### 5) Update Button Copy and Actions
+Customize button text and add or remove actions to suit your needs.
+If you wish to use icons in your button, you can choose from thousands of options in our Fluent icon library. Refer to the [Resources section](#resources--tools) on this page.
+
-Customize button text and actions to suit your needs.
-For icons, use the color #818181 to ensure readability in light/dark modes. Icons should fit edge-to-edge in a 16x16 square. Save them as transparent PNGs at 2x size for good resolution across endpoints. Access Fluent icon asset links in the [Resources section](#resources--tools) on this page.
-
+Note: For other icons, use the color #818181 to ensure readability in both light and dark modes, or choose a color that you have verified looks good. Icons should fit edge-to-edge within a 16x16 square. Save them as transparent PNGs at 2x size for optimal resolution across different endpoints.
***For further design modifications** use the Microsoft Teams UI Kit in Figma to create, visualize, spec (see current card spec) , and verify the layouts before coding.
@@ -107,10 +103,12 @@ This is where the rubber meets the road to ensure high quality cards for all use
* **Design**: Our tools can help you learn Teams patterns and design apps and cards.
* Design Teams apps and cards with the [The Microsoft Teams UI Kit](https://www.figma.com/community/file/916836509871353159), which has core components, templates, and best practices.
- * Find Microsoft icons from [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography) and modify them to to use in your cards (you'll need to save them out as pngs while we work on building in Fluent icon support).
+
+ * Fluent icons are pre-built into the Designer and support both light and dark modes. You can choose from thousands of ready-to-use icons and select from a set of predefined colors. For more Fluent icon resources, check out [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography). NOTE: If you'd like to create custom icons, they should be saved as .pngs (export at 2x) and colored to ensure they look good in both light and dark modes.
* **Build**: Edit, build, preview, and test cards with our Teams Development Portal [Adaptive Card Designer](https://dev.teams.microsoft.com/cards).
+
## Contribute ##
diff --git a/samples/recipe/README.md b/samples/recipe/README.md
index 6a60ff9..cc9604c 100644
--- a/samples/recipe/README.md
+++ b/samples/recipe/README.md
@@ -46,9 +46,6 @@ We designed this card for Teams app partners who need to support your use case.
Teams provides support for this tool, which is ideal for constructing and modifying cards. Copy the [card](card.json) payload and click on the ‘Open in Designer’ button to start working in the Designer platform.
-> [!NOTE]
-> Responsive layout is not supported in the Designer.
-
_To create a "full width" card, add the following code to the JSON._
```json
@@ -67,11 +64,14 @@ Set the maximum line truncation as desired. You can choose to keep or remove the
#### 5) Update Button Copy and Actions
-Customize button text and actions to suit your needs.
-For icons, use the color #818181 to ensure readability in light/dark modes. Icons should fit edge-to-edge in a 16x16 square. Save them as transparent PNGs at 2x size for good resolution across endpoints. Access Fluent icon asset links in the [Resources section](#resources--tools) on this page.
+Customize button text and add or remove actions to suit your needs.
+If you wish to use icons in your button, you can choose from thousands of options in our Fluent icon library. Refer to the [Resources section](#resources--tools) on this page.
+
+Note: For other icons, use the color #818181 to ensure readability in both light and dark modes, or choose a color that you have verified looks good. Icons should fit edge-to-edge within a 16x16 square. Save them as transparent PNGs at 2x size for optimal resolution across different endpoints.
- ***For further design modifications** use the Microsoft Teams UI Kit in Figma to create, visualize, spec (see current card spec) , and verify the layouts before coding.
+
+***For further design modifications** use the Microsoft Teams UI Kit in Figma to create, visualize, spec (see current card spec) , and verify the layouts before coding.
@@ -94,10 +94,12 @@ This marks the critical point where we ensure that our cards maintain superior q
* **Design**: Our tools can help you learn Teams patterns and design apps and cards.
* Design Teams apps and cards with the [The Microsoft Teams UI Kit](https://www.figma.com/community/file/916836509871353159), which has core components, templates, and best practices.
- * Find Microsoft icons from [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography) and modify them to to use in your cards (you'll need to save them out as pngs while we work on building in Fluent icon support).
+
+ * Fluent icons are pre-built into the Designer and support both light and dark modes. You can choose from thousands of ready-to-use icons and select from a set of predefined colors. For more Fluent icon resources, check out [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography). NOTE: If you'd like to create custom icons, they should be saved as .pngs (export at 2x) and colored to ensure they look good in both light and dark modes.
* **Build**: Edit, build, preview, and test cards with our Teams Development Portal [Adaptive Card Designer](https://dev.teams.microsoft.com/cards).
+
## Contribute ##
diff --git a/samples/standard-video/README.md b/samples/standard-video/README.md
index c94236f..2ac1016 100644
--- a/samples/standard-video/README.md
+++ b/samples/standard-video/README.md
@@ -2,7 +2,7 @@
## Summary
-The Standard Video Card prioritizes brevity without sacrificing functionality. Whether you’re after tech insights or artistic inspiration, this card delivers. Discover additional choices—bookmark, share, or dive into more content—from the overflow menu.
+The Standard Video Card prioritizes brevity without sacrificing functionality. Whether you’re after tech insights or artistic inspiration, this card delivers. Discover additional choices—bookmark, share, or dive into more content—from the overflow menu.
_user-sent_ card example:
@@ -44,9 +44,6 @@ This card utilizes our responsive framework, allowing for multiple layouts or co
Teams provides support for this tool, which is ideal for constructing and modifying cards. Copy the [card](card.json) payload and click on the ‘Open in Designer’ button to start working in the Designer platform.
-> [!NOTE]
-> Responsive layout is not supported in the Designer.
-
_To create a "full width" card, add the following code to the JSON._
```json
@@ -61,11 +58,10 @@ _To create a "full width" card, add the following code to the JSON._
#### 2) Replace the Hero Image
-If you’re creating an image, use a 16:9 aspect ratio. Save the image as a transparent PNG at 2x size to ensure good resolution across endpoints.
+If you’re creating an image, use a 16:9 aspect ratio. Save the image as a transparent PNG at 2x size to ensure good resolution across endpoints.Note: You can add a radius to the image in the Designer to create slightly rounded edges.
* For YouTube, Vimeo, and DailyMotion Inline Media Cards, the “play” button will not need to be added.
* Update the image URL to link to your desired image and specify the URL for the selection action.
-* Note: A radius feature for adding rounded corners to the image is coming soon. In the meantime, you can manually add a 6px radius to the corners.
#### 3) Update Video Information
@@ -74,8 +70,10 @@ Modify the details or statistics as desired.
#### 4) Update Button Copy and Actions
Customize button text and add or remove actions to suit your needs.
-For icons, use the color #818181 to ensure readability in light/dark modes. Icons should fit edge-to-edge in a 16x16 square. Save them as transparent PNGs at 2x size for good resolution across endpoints. Access Fluent icon asset links in the [Resources section](#resources--tools) on this page.
+If you wish to use icons in your button, you can choose from thousands of options in our Fluent icon library. Refer to the [Resources section](#resources--tools) on this page.
+
+Note: For other icons, use the color #818181 to ensure readability in both light and dark modes, or choose a color that you have verified looks good. Icons should fit edge-to-edge within a 16x16 square. Save them as transparent PNGs at 2x size for optimal resolution across different endpoints.
***For further design modifications** use the Microsoft Teams UI Kit in Figma to create, visualize, spec (see current card spec) , and verify the layouts before coding.
@@ -103,10 +101,10 @@ This is where the rubber meets the road to ensure high quality cards for all use
* **Design**: Our tools can help you learn Teams patterns and design apps and cards.
* Design Teams apps and cards with the [The Microsoft Teams UI Kit](https://www.figma.com/community/file/916836509871353159), which has core components, templates, and best practices.
- * Find Microsoft icons from [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography) and modify them to to use in your cards (you'll need to save them out as pngs while we work on building in Fluent icon support).
+
+ * Fluent icons are pre-built into the Designer and support both light and dark modes. You can choose from thousands of ready-to-use icons and select from a set of predefined colors. For more Fluent icon resources, check out [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography). NOTE: If you'd like to create custom icons, they should be saved as .pngs (export at 2x) and colored to ensure they look good in both light and dark modes.
* **Build**: Edit, build, preview, and test cards with our Teams Development Portal [Adaptive Card Designer](https://dev.teams.microsoft.com/cards).
-
## Contribute ##
diff --git a/samples/time-off-request/README.md b/samples/time-off-request/README.md
new file mode 100644
index 0000000..4ef1776
--- /dev/null
+++ b/samples/time-off-request/README.md
@@ -0,0 +1,126 @@
+# Time Off Request
+
+## Summary
+
+The Time Off Request Card is designed to simplify the process of requesting vacation, sick leave, and other time off. With easy-to-use dropdowns for selecting your starting day and estimated time off, plus a dedicated space for additional notes, this card ensures a smooth and efficient workflow. Enhance your time management and communication with this essential tool.
+
+_user-sent_ card example:
+
+
+
+## Compatibility
+
+
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+Time Off Card | [Suz Tocco](https://github.com/SuzanneTocco) [Pablo Vicente Astudillo Quintero](https://github.com/pabloas-ms) | Microsoft
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0| October 4, 2024 | Initial release
+
+### Disclaimer
+
+_**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**_
+
+## Responsive Layouts
+
+This card utilizes our responsive framework, allowing for multiple layouts or content modifications for specific set width ranges. For more details on coding with this framework, see Design responsive Adaptive Cards.
+
+
+
+
+
+
+## 1) 👩🎨 Personalize This Card
+
+### Step-by-step instructions and tips
+
+#### 1) Copy the card JSON into the Designer Tool
+
+Teams provides support for this tool, which is ideal for constructing and modifying cards. Copy the [card](card.json) payload and click on the ‘Open in Designer’ button to start working in the Designer platform.
+
+_To create a "full width" card, add the following code to the JSON._
+
+```json
+"msTeams": {
+ "width": "full"
+}
+```
+
+
+
+
+
+#### 2) Replace the Hero Image
+
+If you’re creating images, create one that works well for standard, narrow, and veryNarrow layouts. Create a separate image for the wide layout that is shorter in height. Save the images as a transparent PNG at 2x size to ensure good resolution across endpoints. Note: You can add a radius to the image in the Designer to create slightly rounded edges.
+
+* Update the image URL to link to your desired image.
+
+#### 3) Update Summary Data
+
+Connect to the current time off data you want to display and update the icons as needed (Fluent icon information is provided below).
+
+#### 4) Update Input Options
+
+Adjust the dropdowns and other input fields as needed.
+
+#### 5) Update Button Copy and Actions
+
+Customize button text and add or remove actions to suit your needs.
+If you wish to use icons in your button, you can choose from thousands of options in our Fluent icon library. Refer to the [Resources section](#resources--tools) on this page.
+
+
+Note: For other icons, use the color #818181 to ensure readability in both light and dark modes, or choose a color that you have verified looks good. Icons should fit edge-to-edge within a 16x16 square. Save them as transparent PNGs at 2x size for optimal resolution across different endpoints.
+
+
+***For further design modifications** use the Microsoft Teams UI Kit in Figma to create, visualize, spec (see current card spec) , and verify the layouts before coding.
+
+
+
+
+
+
+
+## 2) 🚗 Test Your Card
+
+This is where the rubber meets the road to ensure high quality cards for all users across all endpoints. Road test your cards considering the following:
+
+* Themes: Light Mode, Dark Mode, High Contrast
+* Common widths: Chat, Channel, Meeting Chat, Phone (iOS- Portrait/landscape, Android-Portrait/landscape), Tablet (iOS- Portrait/landscape, Android-Portrait/landscape)
+* Accessibility: Color contrast if creating new visuals, tabbing with keyboard or mobile equivelents, Voice assistance (readers to read card content)
+
+
+
+## Implementation Details
+
+* We use responsive layout to change the presented information matched to the width that suits it best.
+
+* We use the `ToggleVisibility` action to show/hide optional form fields; notice also that we're toggling the caret icon as a way to dynamically represent the opened/closed state of the field.
+
+## Resources & Tools ##
+
+* **Learn**: For complete details on how to design and build adaptive cards for your Teams app, visit the Microsoft Teams Learn website pages on [Design Adaptive Cards for Your Teams App](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/design-effective-cards?tabs=design) and [Build Cards](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/what-are-cards) (You can use the [schema explorer](https://adaptivecards.io/explorer/) to learn about the structure and options of each element.
+
+* **Design**: Our tools can help you learn Teams patterns and design apps and cards.
+
+ * Design Teams apps and cards with the [The Microsoft Teams UI Kit](https://www.figma.com/community/file/916836509871353159), which has core components, templates, and best practices.
+
+ * Fluent icons are pre-built into the Designer and support both light and dark modes. You can choose from thousands of ready-to-use icons and select from a set of predefined colors. For more Fluent icon resources, check out [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography). NOTE: If you'd like to create custom icons, they should be saved as .pngs (export at 2x) and colored to ensure they look good in both light and dark modes.
+
+* **Build**: Edit, build, preview, and test cards with our Teams Development Portal [Adaptive Card Designer](https://dev.teams.microsoft.com/cards).
+
+
+
+
+## Contribute ##
+
+Refer to the [contribution docs](/CONTRIBUTE.md) for more information.
+
+
diff --git a/samples/time-off-request/assets/card-layouts.png b/samples/time-off-request/assets/card-layouts.png
new file mode 100644
index 0000000..c4345bd
Binary files /dev/null and b/samples/time-off-request/assets/card-layouts.png differ
diff --git a/samples/time-off-request/assets/hero-image-default.png b/samples/time-off-request/assets/hero-image-default.png
new file mode 100644
index 0000000..9854d53
Binary files /dev/null and b/samples/time-off-request/assets/hero-image-default.png differ
diff --git a/samples/time-off-request/assets/hero-wide.png b/samples/time-off-request/assets/hero-wide.png
new file mode 100644
index 0000000..f76c308
Binary files /dev/null and b/samples/time-off-request/assets/hero-wide.png differ
diff --git a/samples/time-off-request/assets/time-off-request-spec.png b/samples/time-off-request/assets/time-off-request-spec.png
new file mode 100644
index 0000000..0c2a90e
Binary files /dev/null and b/samples/time-off-request/assets/time-off-request-spec.png differ
diff --git a/samples/time-off-request/assets/timeOffRequestCard.png b/samples/time-off-request/assets/timeOffRequestCard.png
new file mode 100644
index 0000000..0096a5b
Binary files /dev/null and b/samples/time-off-request/assets/timeOffRequestCard.png differ
diff --git a/samples/time-off-request/card.json b/samples/time-off-request/card.json
new file mode 100644
index 0000000..1700d85
--- /dev/null
+++ b/samples/time-off-request/card.json
@@ -0,0 +1,872 @@
+{
+ "type": "AdaptiveCard",
+ "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
+ "version": "1.5",
+ "body": [
+ {
+ "type": "TextBlock",
+ "text": "Time off request",
+ "wrap": true,
+ "size": "Large",
+ "weight": "Bolder",
+ "spacing": "None"
+ },
+ {
+ "type": "Image",
+ "url": "https://github.com/OfficeDev/Microsoft-Teams-Adaptive-Card-Samples/blob/pabloas/set-2/samples/time-off-request/assets/hero-image-default.png?raw=true",
+ "style": "RoundedCorners",
+ "targetWidth": "AtMost:Standard",
+ "altText": ""
+ },
+ {
+ "type": "Image",
+ "targetWidth": "Wide",
+ "url": "https://github.com/OfficeDev/Microsoft-Teams-Adaptive-Card-Samples/blob/pabloas/set-2/samples/time-off-request/assets/hero-wide.png?raw=true",
+ "style": "RoundedCorners",
+ "altText": ""
+ },
+ {
+ "type": "TextBlock",
+ "text": "Current balance",
+ "wrap": true,
+ "weight": "Bolder",
+ "color": "Accent",
+ "targetWidth": "AtLeast:Narrow"
+ },
+ {
+ "type": "Container",
+ "style": "accent",
+ "showBorder": true,
+ "roundedCorners": true,
+ "items": [
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "24h",
+ "wrap": true,
+ "color": "Accent",
+ "size": "ExtraLarge",
+ "weight": "Bolder"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "HeartPulse",
+ "color": "Accent",
+ "size": "xSmall"
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Sick Days",
+ "wrap": true,
+ "weight": "Bolder",
+ "size": "Default"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ },
+ {
+ "type": "TextBlock",
+ "text": "Accrued at eight hours per three months.",
+ "wrap": true,
+ "isSubtle": true,
+ "size": "Small",
+ "spacing": "ExtraSmall"
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "12h",
+ "wrap": true,
+ "color": "Accent",
+ "size": "ExtraLarge",
+ "weight": "Bolder"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "LeafOne",
+ "color": "Accent",
+ "size": "xSmall"
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Wellness",
+ "wrap": true,
+ "weight": "Bolder"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ },
+ {
+ "type": "TextBlock",
+ "text": "One time 5 day affordance for the year",
+ "wrap": true,
+ "isSubtle": true,
+ "size": "Small",
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "spacing": "ExtraLarge"
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "32h",
+ "wrap": true,
+ "color": "Accent",
+ "size": "ExtraLarge",
+ "weight": "Bolder"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "Beach",
+ "color": "Accent",
+ "size": "xSmall"
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Paid time off",
+ "wrap": true,
+ "weight": "Bolder"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ },
+ {
+ "type": "TextBlock",
+ "text": "Accrued at eight hours per one month.",
+ "wrap": true,
+ "isSubtle": true,
+ "size": "Small",
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "spacing": "ExtraLarge"
+ }
+ ]
+ }
+ ],
+ "spacing": "ExtraSmall",
+ "targetWidth": "Wide",
+ "horizontalAlignment": "Center"
+ },
+ {
+ "type": "Container",
+ "style": "accent",
+ "showBorder": true,
+ "roundedCorners": true,
+ "items": [
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "24h",
+ "wrap": true,
+ "color": "Accent",
+ "size": "ExtraLarge",
+ "weight": "Bolder"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "HeartPulse",
+ "color": "Accent",
+ "size": "xSmall"
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Sick Days",
+ "wrap": true,
+ "weight": "Bolder"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ },
+ {
+ "type": "TextBlock",
+ "text": "Accrued at eight hours per three months.",
+ "wrap": true,
+ "isSubtle": true,
+ "size": "Small",
+ "spacing": "ExtraSmall"
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "12h",
+ "wrap": true,
+ "color": "Accent",
+ "size": "ExtraLarge",
+ "weight": "Bolder"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "LeafOne",
+ "color": "Accent",
+ "size": "xSmall"
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Wellness",
+ "wrap": true,
+ "weight": "Bolder"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ },
+ {
+ "type": "TextBlock",
+ "text": "One time 5 day affordance for the year",
+ "wrap": true,
+ "isSubtle": true,
+ "size": "Small",
+ "spacing": "ExtraSmall"
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "32h",
+ "wrap": true,
+ "color": "Accent",
+ "size": "ExtraLarge",
+ "weight": "Bolder"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "Beach",
+ "color": "Accent",
+ "size": "xSmall"
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Paid time off",
+ "wrap": true,
+ "weight": "Bolder"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ },
+ {
+ "type": "TextBlock",
+ "text": "Accrued at eight hours per one month.",
+ "wrap": true,
+ "isSubtle": true,
+ "size": "Small",
+ "spacing": "ExtraSmall"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "spacing": "ExtraSmall",
+ "targetWidth": "Standard"
+ },
+ {
+ "type": "Container",
+ "style": "accent",
+ "showBorder": true,
+ "roundedCorners": true,
+ "items": [
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "HeartPulse",
+ "color": "Accent",
+ "horizontalAlignment": "Center",
+ "size": "Small"
+ },
+ {
+ "type": "TextBlock",
+ "text": "24h",
+ "wrap": true,
+ "size": "Large",
+ "color": "Accent",
+ "weight": "Bolder",
+ "spacing": "None"
+ },
+ {
+ "type": "TextBlock",
+ "text": "Sick days",
+ "wrap": true,
+ "weight": "Bolder",
+ "spacing": "None",
+ "size": "Small",
+ "color": "Default"
+ }
+ ],
+ "horizontalAlignment": "Center"
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "LeafOne",
+ "color": "Accent",
+ "horizontalAlignment": "Center",
+ "size": "Small"
+ },
+ {
+ "type": "TextBlock",
+ "text": "12h",
+ "wrap": true,
+ "size": "Large",
+ "color": "Accent",
+ "weight": "Bolder",
+ "spacing": "None"
+ },
+ {
+ "type": "TextBlock",
+ "text": "Wellness",
+ "wrap": true,
+ "weight": "Bolder",
+ "spacing": "None",
+ "size": "Small",
+ "color": "Default"
+ }
+ ],
+ "horizontalAlignment": "Center"
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "Icon",
+ "horizontalAlignment": "Center",
+ "name": "Beach",
+ "color": "Accent",
+ "size": "Small"
+ },
+ {
+ "type": "TextBlock",
+ "text": "32h",
+ "wrap": true,
+ "color": "Accent",
+ "size": "Large",
+ "weight": "Bolder",
+ "spacing": "None"
+ },
+ {
+ "type": "TextBlock",
+ "text": "Paid time off",
+ "wrap": true,
+ "weight": "Bolder",
+ "spacing": "None",
+ "size": "Small",
+ "color": "Default"
+ }
+ ],
+ "horizontalAlignment": "Center"
+ }
+ ]
+ }
+ ],
+ "spacing": "ExtraSmall",
+ "targetWidth": "Narrow",
+ "horizontalAlignment": "Center"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "RichTextBlock",
+ "inlines": [
+ {
+ "type": "TextRun",
+ "text": "View current balance",
+ "selectAction": {
+ "type": "Action.ToggleVisibility",
+ "targetElements": [
+ "vNarrowBalance",
+ "balanceDown",
+ "balanceUp"
+ ]
+ }
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "ChevronDown",
+ "size": "xxSmall",
+ "selectAction": {
+ "type": "Action.ToggleVisibility",
+ "targetElements": ["vNarrowBalance", "balanceDown", "balanceUp"]
+ },
+ "color": "Accent",
+ "id": "balanceDown"
+ },
+ {
+ "type": "Icon",
+ "isVisible": false,
+ "id": "balanceUp",
+ "name": "chevronUp",
+ "size": "xxSmall",
+ "color": "Accent",
+ "selectAction": {
+ "type": "Action.ToggleVisibility",
+ "targetElements": ["vNarrowBalance", "balanceDown", "balanceUp"]
+ }
+ }
+ ],
+ "verticalContentAlignment": "Bottom",
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "targetWidth": "VeryNarrow"
+ },
+ {
+ "type": "Container",
+ "style": "accent",
+ "bleed": true,
+ "items": [
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "40px",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "24h",
+ "wrap": true,
+ "size": "Large",
+ "weight": "Bolder",
+ "color": "Accent"
+ }
+ ],
+ "verticalContentAlignment": "Center"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "color": "Accent",
+ "name": "HeartPulse",
+ "size": "xSmall"
+ }
+ ],
+ "verticalContentAlignment": "Center",
+ "spacing": "Small"
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Sick days",
+ "wrap": true,
+ "weight": "Bolder",
+ "size": "Small",
+ "color": "Default"
+ }
+ ],
+ "verticalContentAlignment": "Center",
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "horizontalAlignment": "Left"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "40px",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "12h",
+ "wrap": true,
+ "weight": "Bolder",
+ "color": "Accent",
+ "size": "Large"
+ }
+ ],
+ "verticalContentAlignment": "Center"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "color": "Accent",
+ "name": "LeafOne",
+ "size": "xSmall"
+ }
+ ],
+ "verticalContentAlignment": "Center",
+ "spacing": "Small"
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Wellness",
+ "wrap": true,
+ "size": "Small",
+ "weight": "Bolder",
+ "color": "Default"
+ }
+ ],
+ "verticalContentAlignment": "Center",
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "40px",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "32h",
+ "wrap": true,
+ "weight": "Bolder",
+ "color": "Accent",
+ "size": "Large"
+ }
+ ],
+ "verticalContentAlignment": "Center"
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "color": "Accent",
+ "name": "Beach",
+ "size": "xSmall"
+ }
+ ],
+ "verticalContentAlignment": "Center",
+ "spacing": "Small"
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Paid time off",
+ "wrap": true,
+ "size": "Small",
+ "weight": "Bolder",
+ "color": "Default"
+ }
+ ],
+ "verticalContentAlignment": "Center",
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "spacing": "ExtraSmall"
+ }
+ ],
+ "spacing": "Small",
+ "isVisible": false,
+ "id": "vNarrowBalance",
+ "targetWidth": "VeryNarrow"
+ },
+ {
+ "type": "Input.ChoiceSet",
+ "label": "Reason for leave",
+ "choices": [
+ {
+ "title": "Vacation",
+ "value": "Vacation"
+ },
+ {
+ "title": "Sick Day",
+ "value": "Sick Day"
+ },
+ {
+ "title": "Sick Leave",
+ "value": "Sick Leave"
+ },
+ {
+ "title": "Other",
+ "value": "Other"
+ }
+ ],
+ "value": "Vacation",
+ "id": "leave_reason",
+ "spacing": "Medium"
+ },
+ {
+ "type": "Input.Toggle",
+ "title": "All day (8hrs)",
+ "id": "all_day",
+ "spacing": "Small"
+ },
+ {
+ "type": "Container",
+ "layouts": [
+ {
+ "type": "Layout.Flow",
+ "verticalItemsAlignment": "Bottom",
+ "minItemWidth": "0px",
+ "itemFit": "Fill"
+ }
+ ],
+ "items": [
+ {
+ "type": "Input.Date",
+ "label": "Date",
+ "id": "date",
+ "isRequired": true,
+ "errorMessage": "Date is required"
+ }
+ ]
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "stretch"
+ },
+ {
+ "type": "Column",
+ "width": "stretch",
+ "spacing": "Small",
+ "verticalContentAlignment": "Bottom"
+ }
+ ]
+ },
+ {
+ "type": "Input.Number",
+ "label": "Estimated days off",
+ "placeholder": "Select how many days",
+ "id": "days_off",
+ "spacing": "Medium"
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "RichTextBlock",
+ "inlines": [
+ {
+ "type": "TextRun",
+ "text": "Add comments",
+ "selectAction": {
+ "type": "Action.ToggleVisibility",
+ "targetElements": ["comments", "chevronDown", "chevronUp"]
+ }
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "width": "auto",
+ "items": [
+ {
+ "type": "Icon",
+ "name": "ChevronDown",
+ "size": "xxSmall",
+ "selectAction": {
+ "type": "Action.ToggleVisibility",
+ "targetElements": ["comments", "chevronDown", "chevronUp"]
+ },
+ "color": "Accent",
+ "id": "chevronDown"
+ },
+ {
+ "type": "Icon",
+ "isVisible": false,
+ "id": "chevronUp",
+ "name": "chevronUp",
+ "size": "xxSmall",
+ "color": "Accent",
+ "selectAction": {
+ "type": "Action.ToggleVisibility",
+ "targetElements": ["comments", "chevronDown", "chevronUp"]
+ }
+ }
+ ],
+ "verticalContentAlignment": "Bottom",
+ "spacing": "ExtraSmall"
+ }
+ ]
+ },
+ {
+ "type": "Input.Text",
+ "placeholder": "Enter any comments",
+ "id": "comments",
+ "isVisible": false,
+ "isMultiline": true
+ },
+ {
+ "type": "ActionSet",
+ "actions": [
+ {
+ "type": "Action.Submit",
+ "title": "Submit",
+ "style": "positive"
+ }
+ ],
+ "separator": true,
+ "spacing": "ExtraLarge"
+ }
+ ]
+}
diff --git a/samples/work_item/README.md b/samples/work_item/README.md
index 748631a..408a399 100644
--- a/samples/work_item/README.md
+++ b/samples/work_item/README.md
@@ -51,9 +51,6 @@ Below you'll find a few alternative expressions of the card.
Teams provides support for this tool, which is ideal for constructing and modifying cards. Copy the [card](card.json) payload and click on the ‘Open in Designer’ button to start working in the Designer platform.
-> [!NOTE]
-> Responsive layout is not supported in the Designer.
-
_To create a "full width" card, add the following code to the JSON._
```json
@@ -68,7 +65,7 @@ _To create a "full width" card, add the following code to the JSON._
#### 2) Replace the Hero Image
-This design is best complemented by a small, square image (recommended size is ~56x56 pixels). To guarantee high resolution on all endpoints, save the image as a transparent PNG at a 2x scale, while keeping the pixel size static in the Designer.
+This design is best complemented by a small, square image (recommended size is ~56x56 pixels). To guarantee high resolution on all endpoints, save the image as a transparent PNG at a 2x scale, while keeping the pixel size static in the Designer. Ensure the image looks good across all color modes.
#### 3) Update the Copy/Details
@@ -77,8 +74,10 @@ Tailor the description or features to suit your needs.
#### 4) Update Button Copy and Actions
Customize button text and add or remove actions to suit your needs.
-For icons, use the color #818181 to ensure readability in light/dark modes. Icons should fit edge-to-edge in a 16x16 square. Save them as transparent PNGs at 2x size for good resolution across endpoints. Access Fluent icon asset links in the [Resources section](#resources--tools) on this page.
+If you wish to use icons in your button, you can choose from thousands of options in our Fluent icon library. Refer to the [Resources section](#resources--tools) on this page.
+
+Note: For other icons, use the color #818181 to ensure readability in both light and dark modes, or choose a color that you have verified looks good. Icons should fit edge-to-edge within a 16x16 square. Save them as transparent PNGs at 2x size for optimal resolution across different endpoints.
***For further design modifications** use the Microsoft Teams UI Kit in Figma to create, visualize, spec (see current card spec) , and verify the layouts before coding.
@@ -99,17 +98,19 @@ This is where the rubber meets the road to ensure high quality cards for all use
-## Resources & Tools
+## Resources & Tools ##
* **Learn**: For complete details on how to design and build adaptive cards for your Teams app, visit the Microsoft Teams Learn website pages on [Design Adaptive Cards for Your Teams App](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/design-effective-cards?tabs=design) and [Build Cards](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/what-are-cards) (You can use the [schema explorer](https://adaptivecards.io/explorer/) to learn about the structure and options of each element.
* **Design**: Our tools can help you learn Teams patterns and design apps and cards.
* Design Teams apps and cards with the [The Microsoft Teams UI Kit](https://www.figma.com/community/file/916836509871353159), which has core components, templates, and best practices.
- * Find Microsoft icons from [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography) and modify them to to use in your cards (you'll need to save them out as pngs while we work on building in Fluent icon support).
+
+ * Fluent icons are pre-built into the Designer and support both light and dark modes. You can choose from thousands of ready-to-use icons and select from a set of predefined colors. For more Fluent icon resources, check out [IconCloud](https://iconcloud.design/browse/Fluent%20System%20Library/Fluent%20Regular) or the [Fluent 2 Iconography site](https://fluent2.microsoft.design/iconography). NOTE: If you'd like to create custom icons, they should be saved as .pngs (export at 2x) and colored to ensure they look good in both light and dark modes.
* **Build**: Edit, build, preview, and test cards with our Teams Development Portal [Adaptive Card Designer](https://dev.teams.microsoft.com/cards).
+
## Contribute
