12/25/2023 0 Comments Simple divider design for cardThis is particularly useful (and necessary) when creating table layouts. Use "width": "px" to have a specific pixel width.If you have three columns with their width property set to 1, 4 and 5 respectively, they will end up using 10%, 40% and 50% of the available width, respectively. Use "width": for a Column to use a proportion of the available width in the ColumnSet.When multiple Columns have "width": "stretch", they all equally share the remaining width. Use "width": "stretch" for a Column to use the remaining width in the ColumnSet.Use "width": "auto" for a Column to use as much width as is necessary to fit its content.Do use the appropriate sizing approach for columns:.Do use ColumnSet if you need to, for example, display an image of the far left of the card and some text on the same line at the far right of the card.Do use ColumnSet for table-like layouts in general.The Container element makes it possible to group a set of elements together. Use the Container element only when necessary. Such paddings usually interfere with the overall layout by introducing undesirable spacing on the side of your image. Don't craft your images with built-in paddings.For that reason, do make the background of your images transparent. In Outlook, your Adaptive Cards will not necessarily be displayed on top of a white background, and your images should be able to superimpose themselves on top of any background color. Don't design your images with a fixed background color, like white, unless that background color is supposed to be visible to the user.Do use the width and height properties of the Image element if you need to precisely control the actual size of the images in your card.In other words, it is better to design a 100x100 pixels image and display it at 50x50 pixels than to design a 50x50 pixels image and display it at 100x100 pixels. An image designed for a high DPI screen will be shrunk on a lower DPI screen which usually yields good results. An image designed for a low (96) DPI screen will be blown up when displayed on a higher DPI screen and will therefore look pixelated. Do design your images assuming they will be displayed on a high DPI screen.Text formattingĪll TextBlock elements in a card can be formatted using Markdown. Below are a few design tips to help you get started. It is always a good idea to plan your design ahead of writing the Adaptive Card payload, using a paint tool for instance or even just pen and paper this will make it a lot easier to translate visuals into the appropriate Adaptive Card constructs. "text": "**FLIGHT ITINERARY - CONTOSO AIR**"Īn Adaptive Card can be very simple or quite complex depending on the layout you wish to achieve. "speak": "Your flight is confirmed for you and 3 other passengers from San Francisco to Amsterdam on Friday, October 10 8:30 AM", The ability to align elements horizontally and vertically.The ability to layout elements in multiple columns.The ability to control the amount of space between those elements. The ability to stack elements of various types in any order.The above card illustrates some of the core and most powerful capabilities of the Adaptive Card format: The Adaptive Cards Designer provides a drag-and-drop experience to quickly build and tweak adaptive cards. There you will find Adaptive Card samples (including the one below) that can help you get started crafting your own cards and also allows you to send those cards to your own Microsoft 365 email account to see how they look in Outlook. Our Card Playground tool has been updated to support the Adaptive Card format. If you are implementing an Office 365 or Microsoft Teams connector, please refer to the MessageCard format reference.įor information on which Outlook versions support the Adaptive Card format, see Outlook version requirements for actionable messages. Office connectors and Microsoft Teams connectors do not currently support the Adaptive Card format. The MessageCard format is still supported but is now de-emphasized. The Adaptive Card format is only available for Actionable Messages sent via email, and is required to support Outlook on iOS and Android.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |