Below you will find various useful UI Elements as code snippets. Just copy-and-paste them into your Card Designer project.
Buttons are used when the user trigger an action or submits something. You can add an
icon attribute to your button so that it shows one of the available icons.
Digital Assistant uses
<at-link> elements when linking to another resources as this allows the Assistant to dynamically decide if a link should open in a new tab or in the current one.
For instance, if you embed a Card within your SharePoint and there is a link to a news article that's also located within SharePoint the link would be a relative one and therefore it opens the article in the same window. Clicking the same link from a mobile phone would mean it's an absolute link and the Assistant would open the resource in a new browser tab.
The easiest way to create a visually seperate area within your Card is to give the
<div> just below where you want to draw the line the class
bt which according to our Atomic CSS stands for
If you use a class
mx together with the
bt class you get a seperator line that's 8px away from the border on either side, to give an even lighter visual impression.
If you use dialog interaction on your Cards it is recommended to give the modal (that appears on user interaction) a header with a caption.
If you have a time formatted in UTC you can convert it into a timestap that reads 'x minutes/days/weeks/months ago'.