UI Elements

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.

Horizontal seperator

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 border-top.

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'.