Skip to main content

Microsoft's Adaptive Cards framework aims to unify design across platforms

At BUILD 2017, Microsoft announced a new open framework for card-based UI called Adaptive Cards that are designed to work cross platform, easily and conveniently, without being limited to set templates or custom HTML layouts. Cards are used all over the place in today's online world; you can find them on social media, restaurant reservations, flight bookings, and more. With Adaptive Cards, developers only need to build once, and have those cards show up in apps and websites across platform, natively and securely.

What are Adaptive Cards?

Microsoft says (opens in new tab) "Adaptive Cards are a new way for developers to exchange card content in a common and consistent way." Adaptive Cards allow developers to extend beyond templated cards, and this content can be rendered natively from within any app, website, or service. For example, an airline can provide an Adaptive Card that will render natively no matter where it shows up. The card can show up in Cortana, Windows Timeline, Skype, a website, etc. and the card will look like it belongs in that location.

Card Authors describe their content as a simple JSON object. That content can then be rendered natively inside a Host Application, automatically adapting to the look and feel of the Host. [A card,] when delivered to Skype, will look and feel like a Skype card. When that same payload is sent to Microsoft Teams, it will look and feel like Microsoft Teams. As more host apps start to support Adaptive Cards, that same payload will automatically light up inside these applications, yet still feel entirely native to the app.

The advantage of Adaptive Cards is that these cards look and feel native to the user, without any extra work on the developers behalf. This is a huge deal, as normal content cards are usually built specifically for the app, service, or website that they are supposed to appear in. Adaptive Cards removes this problem by making them automatically adapt to the platform where it is rendered. These cards can show up anywhere, whether it be Windows, iOS, or Android, and look like a truly natively experience.

Microsoft's goal for Adaptive Cards are for them to be portable, open, low cost, expressive, declarative, and automatically styled. They fill a middle ground between fixed template cards, and custom HTML cards. Adaptive Cards also have full support for voice enabled experiences, meaning users can interact with these cards with just their voice if required.

What even are "cards?"

Cards themselves are useful in many areas, but are most commonly used when it comes to showing a user glanceable information. Cards have become increasingly popular in bot-based communication, where a person can ask a bot for information on a specific subject, and the bot follow up with a block with all the relevant detail that the user needs — a card. You can also find cards in use on social media, when linking an article or video in a tweet or post. It's not just a link that shows up, it's an entire glanceable card that gives the user a quick overview as to what that link is about.

Microsoft has been building support for Adaptive Cards into Windows for some time. Developers can now build cards that show up all over the place, including notifications, Timeline, and Cortana. This is super useful, as it means developers can now surface information to the user via parts of the OS even if their app isn't open.

You can expect to see Adaptive Cards show up in more areas of Windows and Microsoft's other software over time, especially when it comes to bot interaction. We already know Microsoft is building out a chat-based UI for Cortana, which will be an excellent place to showcase Adaptive Cards. Services could tap into Cortana Skills, and utilize Adaptive Cards to show the user information when requested. Want information on the weather or a flight via Cortana? Just ask, and it'll provide you with a handy Adaptive Card.

Adaptive Cards will make the Windows experience far richer, and since they are cross platform, hopefully developers will want to take advantage of them. If you're a developer, make sure you check out the official documentation for Adaptive Cards.

Zac Bowden
Zac Bowden

Zac Bowden is a Senior Editor at Windows Central. Bringing you exclusive coverage into the world of Windows 10 on PCs, tablets, phones, and more. Also an avid collector of rare Microsoft prototype devices! Keep in touch on Twitter: @zacbowden.

28 Comments
  • This article has made my day!!! Thanks Zac!
  • Sound great idea but might fail to work as usual.
  • as did your comment
  • quit with the MS kool aid Bonze, you know that MS has a track record of coming up with AWESOME stuff then jumping ship!
  • I'm assuming this is what the big engineering change is when thinking about the move of proactive content from Cortana into Action Center. Very interesting to see.
  • Ah didn't make that connection!
  • I have a constant doubt that moving Cortana to Action center will actually reduce its awareness and focus from users.
  • MS have to make some efforts to introduce to these changes. Like it had to do with Windows 8.1.
    But I think all information at one place is better than moving from one screen to other to some extent. Users hate to switch screens.. all aren't that patient.
  • Andromeda
  • oh, so we are calling them cards instead of modal mode windows . the more things change.... you complete the sentence...you've seen this all before.
  • It's also just HTML and CSS. Obviously Microsoft is trying to make themselves relevant in an area where they are not (Web 3.0), but it won't matter, because as I said, they're irrelevant--Apple and Google programmers don't care about Microsoft.
  • I guess you didn't actually read the article? It's JSON not HTML and CSS. The styling comes from the OS not the card. The Card is data only. Kind of like CalDAV for calendar data. This is potentially a very useful standard but it will remain to be seen if other OSes take up the standard.
  • ...one sentence... "Patent it quickly!!!" 😊💕
  • Beautiful idea. I like how Microsoft is working closely with all platforms regardless of who is maker of it. This something which we must see from all vendors.
    Windows Mobile failure has made MS more adaptive. Now I find some advantage in it :P
    But I guess collaborative development must be adapted everywhere. It's good for users atleast. ;)
  • Now ask yourself why a programmer on iOS or Android would care about what Microsoft is doing?
  • Does Apple has some think similar for Android developer who want to easily share/display information with iOS and OS x application? Same goes for Google. Microsoft is trying develop framework so data can be display anywhere and look native.
    @DracheMitch, If this card-based UI framework is adopted by Apple and Google is good for every developer. Apple, Android, web, Windows... what is the problem? Ho, I see, am I wasting my time with a Microsoft hater troll?
  • kristaps fomins
  • I had a brief Deja Vu moment until I realized Cards was not about credential/authentication Cards. ;-)
  • How is this different from what WebOS was trying to do with cards?
  • It's similar I think but the difference being they're trying to make this cross platform
  • WebOS was cross-platform as most apps used HTML, CSS and JS. Most WebOS apps could run on Firefox OS and can run on KaiOS. WebOS had a native API, but it was not used for much more than games.
  • So, I could run WebOS on any device...I'm confused troll, can you explain to us what you mean?
  • WebOS wasn't crossplatform, it was a os... This is a attempt to make different stuff a standard, it is very common with cards in voice assistants and when now sharing info between platforms/apps/os it will be nice to have it with the same defintion..
  • Now they just need developers!
  • Looks like it will work with all platforms except for the most popular one, Windows 7. So that leaves me out until businesses start upgrading. It sucks developing software for Windows.
  • Well, it's just about 21 months until extended support Windows 7 ends.
  • Great to read about them going for standards again so everyone can adapt and create a unified experience. Might not work out 100% but it surely lays out a new foundation. Look at CSS Grid. MSFT started with the specs, W3C worked on it and created the final specs and resulted in an awesome product. Laying groundwork is great moving forward and 'if iOS or Android devs thinking about MSFT'? Google is making the biggest move towards PWA, tell you to use Angular for it and what does Angular use? TypeScript, a MSFT product! Not thinking about them is not an option ;)
  • I'm not sure the adaptive card will make the windows experience richer (could also make the experience annoying if there are adaptive cards popping up everywhere in windows; not necessarily "enriching"), but it would help make windows 10 feel more fit and finished, which windows 10 still sorely needs after its 3 year existence. The adaptive cards look and sound a lot like the live tiles we have now. I'm sure if the live tile size package could be expanded, they could a "card sized" view. Still waiting for interactive live tiles though, though I could see adaptive cards in the notification center expand that development faster to the live tiles.