Various UI Elements

Below you will find various useful UI Elements as code snippets. Just copy-and-paste them into your Card Designer project.

Button

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.

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

Moment

If you have a time formatted in UTC you can convert it into a timestap that reads 'x minutes/days/weeks/months ago'.

Got an issue? Or want to submit feedback?
Submit your feedback

Our new Feedback and Issue Tracker is built on GitHub Issues. Just leave your comment below and you can track our team resolve it, or browse issues others have already submitted.

Read how to use the Feedback and Issue Tracker