terminology - What's the difference between cards, panels, and tiles?

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.

Answer

The terms card, panel, tile, and others are often used interchangeably, so their definitions not precise and can change from company to company or ecosystem to ecosystem. But, there is a loose vernacular definition for the different containers.

Why does it matter?

Because in practice, naming things is important. Here is an example of why container names are important (click image to expand):

• 
  
  

  Now, imagine that some of these container names were swapped. For example, if card were swapped with panel or toolbar were swapped with tile. That would lead to some pretty confusing UX discussions.

  
  


• 
  

  This thought exercise shows us that although the container terms are all loosely interchangeable, there is a loose convention around what they mean.

  
  


• 
  

  It also illustrates why it's important to have different terms for containers (imagine how hard it would be to work with this layout if all of the containers were named 'panel').

  
  

---

Vernacular definitions

Here's a rough definition of vernacular use for the terms. The illustration above is a decent reference for examples of each container:

• 
  

  Window

  
  
  
  
  • Common ecosystem: MS Windows, Mac OS, Ubuntu, and other operating systems
  
  
  • Typically refers to the largest visual container for an application view, and is typically defined by the operating system.
  
  
  
  



• 
  

  Frame

  
  
  
  
  • Common ecosystems: all digital UI's
  
  
  • Typically refers to an outside element or border object which contains a single body of content.
  
  
  • e.g. in HTML, panels are often wrapped inside a frame object which allows the frame to be styled independently from the panel contents.
  
  
  
  


• 
  

  Panel

  
  
  
  
  
  • Common ecosystems: all digital UI's
  
  
  • Typically refers to a container within a window which contains multiple related elements. For example, a panel might contain a form, a set of information, a data table, etc.
  
  
  • Panels are often used to section window contents to ease visual organization.
  
  
  
  


• 
  

  Card

  
  
  
  
  • Common ecosystems: web, Google Material Design, mobile and table applications
  
  
  
  • Typically refers to a rectangular container that contains multiple related elements that can appear several times on a page. For example, news articles, search results, and restaurant listings are all items that may contain multiple elements (image, title, description) and are well suited to card layouts.
  
  
  • Cards are a convenient way to chunk and organize content in grid-layout, to facilitate the presentation of complex/hierarchical information.
  
  
  • Cards (unlike tiles) can and frequently do contain multiple interactive elements. For example, in the illustration above you have approve/deny buttons, and the user might be able to click on the card title to load more details.
  
  
  • Cards are often manipulable as containers....often users can dismiss, drag, swipe, or rearrange cards.
  
  
  
  


• 
  

  Tile

  
  
  
  
  • Common ecosystems: Microsoft Metro interface
  
  
  
  • Tiles typically represent small, single-purpose containers. Tiles may present a single piece of information (e.g. an icon for an application) or a small cluster of related information (e.g. weather temperature and humidity), but rarely present extensive information.
  
  
  • Tiles are often distinguished by their single use....in Microsoft Windows 8+ tiles are clickable and send the user to a single application, view or web page.
  
  
  
  

Again, these terms are only loosely defined and usage may vary from organization to organization.

But it's still useful to have a loose/informal definition for the reasons outlined above: distinguishing containers by name is very helpful in practice for UX professionals.