Adaptive Cards are a standardized UX for business use cases, such as displaying Adaptive Cards in SharePoint, or to build Adaptive Cards . With the wide range of input types and the flexible layout they are a great way to make portable snippets of information.
If you’re considering to build Adaptive Cards for your business, then these free examples could help you get there more quickly. Our free Adaptive Card samples show a great range of designs and layouts with images, approve/decline buttons and expanding sections.
Adaptive Card samples for Employee Experience
1. Corporate news
An attractive display for a Corporate news or Internal comms article, posted directly to your intranet. It features an avatar of the author, as well as a Like and Comment button (the latter of which reveals a comment section on click). Both the Likes and Comments could be fed back to your CMS its API.
List of news
Latest article only
2. Workflow / Approval request
This template shows a new request for annual leave by an employee, but this could easily be adapted to other use cases from ERP, procurement, finance, etc.
3. Praise colleagues
This Adaptive Card is a staff morale booster. It shows you what praise your colleagues have recently been giving you, and what better motivation is there to give back and send your own praise to your team members. It also lists upcoming anniversaries, in case you wanted to plan a little surprise. 😉
4. Employee anniversary
Another great way to boost your employees’ morale is to not forget those little touches that make them feel rewarded. This Adaptive Card calls out your anniversary and specifically shows you how much your team has appreciated your effort.
5. Expense report
This template shows off the strength of Adaptive Cards. It has multiple sections that each can expand to reveal more details or let you leave a comment. The template also contains a set of Action buttons that let you approve or deny the request.
6. Inventory status
The Inventory Adaptive Card summarizes some key data from a chosen location and puts the information into a nice, at-a-glance overview. Obviously you can tweak the layout of this Card to work with your ERP or eCommerce app.
7. Company stock
Most quoted companies offer shares as part of their compensation packages. Employees therefore will be interested to see how the company performs at the stock exchange. With this Adaptive Card you can place this information prominently wherever employees want it.
No longer just a drab email you get once or twice a month, the payslip Adaptive Card shows you at-a-glance all your earnings and deductions adding some extra convenience to your digital workplace.
9. Public holidays
People always want to know how long it is until they get to have another day off to see friends or family. With this Adaptive Card they can prominently see what holidays are coming up.
Basic Adaptive Card elements like lists and forms
10. Key performance indicator chart
Making a dashboard that shows key performance metrics at a glance is key to helping employees monitor external work data. With this template you can easily add big numbers to your intranet pages or Viva Connections dashboard.
11. Basic list
It does what it says on the tin: for every item in your array this Adaptive Card will repeat itself and display your data in a compact layout.
12. Big list
Perhaps you want to show some more details or a large image, in which case this sample Adaptive Card expands on the basic list with a little more details and expanding section. Customize as needed.
13. List of issues
A lot of the time, lists consist of tasks, issues, cases, work orders, etc. With this Card example we’ve shown how you can tweak your list to really drive home the point that it serve to display the most useful information for a given type of information (i.e. in this case, helpdesk tickets).
Forms don’t have to to bland. This form makes booking a meeting room a simple and seamless, yet pleasant, experience for the employee. Just change the header image as needed, and you can adjust this sample to suit any use case.
15. Basic notification
Recreate the simplicity of iOS notifications, just for workplace apps, with this Adaptive Card. Just add your own app’s API data, a webhook, or a Zapier Zap, and you’re golden.
16. Big notification
If you need a little more detail, this example style of notification gives you a summary of what’s new in a given app with convenient shortcuts to specific events, and quick actions to apply to the data without having to leave the Adaptive Card.
Driving around 80% of all intranets SharePoint installations are the number 1 use case for Adaptive Cards. With these samples you are sure to impress your team, and they’re super simple to embed. All of these Cards can also be embedded into the new Microsoft Viva dashboard function. Learn more about this feature here.
Elevate the lunch menu example card to be an outstandingly designed piece of information. Lunch is so important for employees’ concentration, and for having those random moments with colleagues that bring about new ideas. With this Adaptive Card users will want to come into the office just to taste the great food the canteen is offering today.
18. Leave balance and PTO request
This humble leave request has gotten a glow up. No longer do users have to log into the drab HR portal everytime they want to check something as benign as their remaining PTO allowance. This Adaptive Card places the information centrally on your SharePoint or Viva Dashboard. Oh, and the added bonus is it actually also lets you submit a new request from the built-in form. How cool is that!? 😉
19. Safety announcement
Although rare, it is crucial that organizations can communicate important updates in a timely manner. It may only be something as simple as a closed car park or disabled elevator, but this Card places an unmissable warning on your SharePoint page or Viva dashboard. Change to the
severity field between
high see how the message changes along with it.
20. Company events
Many comms departments have a schedule of events open to all staff that further the team’s skills, team building, mentoring or self-improvement. Or you may host talks by senior management that staff are invited to attend virtually. With this Adaptive Card example the internal event schedule has gotten an easy-to-follow design that puts everything that’s on offer on one, convenient list in your Intranet.
21. Leave calendar
There are many ways teams manage absences, for example by inviting colleagues to a holiday reminder event. But this Card puts an interesting twist on things: Place this on your SharePoint page or Viva dashboard and you can easily scan what team members aren’t available throughout the month. Simple, yet effective.
Maybe you remember how overwhelming your first day was at your organization. This extensible Card collates all the different apps and instructions you need to follow into one simple list you can place on the employee’s Viva Dashboard.
23. Product listing
Perhaps your organization wants to inform the team about new products with this tasteful Adaptive Card. Ideal to advertise to your own staff, or to educate frontline/retail teams, this Card can be easily customized to suit your own needs.
Are you considering to use Adaptive Cards for your next project? Despite attractive layouts and easy data connections, there are some pitfalls you should consider before jumping on the bandwagon.
I hope you have found a suitable template as the basis for your own customizations. Just hit the Use this template button to load the template into the Adaptive Cards Designer and make your changes. Once you’re done, deploy the Card to a channel of your choice.