It seems as if with some of the modern front-end development frameworks there is a blur between the different types of ‘container’ elements. Whether this is an attempt to abstract the design from implementation or if this is due to there not being any standardization of terminologies I am not sure, but it leads to the fact that in some design frameworks I see the term panels being used but not cards (e.g. Bootstrap 3) while in others the term cards exists but not panels (e.g. Iconic), and perhaps both exist in others?
From a design perspective, it seems that both cards and panels are just containers, and since there’s nothing that defines how big a card can get and how small a panel can be, I am wondering whether there’s really any difference. From an implementation perspective, it seems that cards should be used for smaller size design elements and are preferred on mobile specific applications, whereas panels are used for a wider range of design elements and are preferred on desktop specific applications.
Is there any evidence/reference/examples that will help to illustrate or highlight the (lack of) differences? For some reason I think cards and tiles are more closely related to each other, and that panels seem to be in a slightly different class/family?
If we take the argument that there are no differences, then it is hard to understand why people associate ’tiles’ with Microsoft ‘Metro’ style home pages, while on Google and Android apps it is ‘cards’ and for Java and Gnome applications it is ‘panels’. Perhaps there are some contextual or implementation differences?
UPDATE: with the release of Bootstrap 4, it seems like cards are basically equivalent to panels (since one component has replaced the other), but with this comes the cost of having to maintain a more flexible container that will make it difficult to implement consistently. According to Bootstrap:
A flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
FURTHER UPDATE: It seems as if Bootstrap 5 and Material.io have adopted the card UI component in the new world of responsive and mobile first/multi-device ecosystem design systems while “tiles” have a very specific meaning in the Microsoft Fluent Design System:
A tile is an app’s representation on the Start menu. Every app has a tile. When you create a new Universal Windows Platform (UWP) app project in Microsoft Visual Studio, it includes a default tile that displays your app’s name and logo
Panels don’t seem to be part of the vocabulary anymore, as least in terms of a UI component, but in the Microsoft and Java world it still represents an abstract concept of organisation layouts of UI components.