Material Design - Card within a Card

Question

I'm utilizing Material Design for our product and have an area that has cards displaying information.

Can a card be listed within a card?

Similar to the image below but with content, obviously.

Answer 1

While others have noted that it is clearly a big Don't in the guidelines, it's worth noting that google uses nested cards in the Google App itself:

I personally think a better alternative would be to break the horizontally scrolling cards into a section below the main card with a "related stories" overline, and 0dp to indicate their secondary nature

Answer 2

No

As per MD Card guidelines:

Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length.

A card collection is a layout of cards on the same plane.

Also:

A card collection is coplanar, or a layout of cards on the same plane.

If you want to use a coplanar , each card has to be on the same plane within each other, where the plane is the app or page background.

Finally, about content:

Cards can be constructed using blocks of content which include:

An optional header
A primary title
Rich media
Supporting text
Actions

Answer 3

There has already been a number of good explanations and references from Google Material Design to suggest that it is not a good idea, so I will tackle this from the pure design aspect in two ways:

The purpose of card: to surface content so that it can be displayed in a simple and clear manner. Sometimes people try to add too much interaction to it (e.g. Live Tiles in Windows 10 or actions/links on the cards) and it really defeats the purpose for which the cards are supposed to serve.

The issue with cards: as with most 'flat' design elements, there is no clear way to indicate the possible interactions within the card other than for users to explore (i.e. with their mouse or touch), therefore you want to make the interaction and content as simple as possible. However, we see these days the proliferation in the variation of this design pattern to include both interaction for the whole card versus parts/sections of the card. This makes the complexity of the interaction more than necessary for the user to understand, and therefore the overall design, especially when there are a number of different types of cards present at the same time, very 'unintuitive'.

So you can see why this is not something normally encouraged in design patterns, although it certainly doesn't stop people from still trying to do this.

Also, an interesting article on some pitfalls of Material Design to avoid, which also discusses the use of cards:

Cards have their own purpose and they are not suitable for every scenario where we need to display data. Nope, they are not the panacea for every design problem: when misused they end up being a cognitive hindrance — a beautiful one, but still a clog.

Answer 4

I had the same issue and I don't think it is a definite "no you can't". Maybe this comes up more for desktop / larger devices.

The reason I am considering it is that I have a card (on desktop) with tabbed content. Each tab contains a "list" of information SOME of which require more than 3 lines of content (and therefore can't be presented as a list - which is explicit in the spec - "If more than three lines of text need to be shown in list tiles, use cards instead."). So this would seem to suggest that a card is the appropriate container for these items.

I don't see why you can't have a plane of cards inside a card. Cards aren't limited to containing only Text, Images, Rich Media and a Link. As per the Specs it is OK to have all sorts of different content in cards, like:

Tabs!, Inputs, Lists & Grid lists. Here is an example from the Specs showing tabs in a card:

So why not a plane of cards?

A collection of cards is coplanar but that doesn't mean that a card on that plane can't contain a collection of cards, it just means that that collection would be on a different plane. That is, the parent card is on a plane with its siblings while the child collection is also on its own plane (which happens to be on a plane that is inside another card). So you just need to elevate a nested collection to a higher plane (as shown in the question).

Answer 5

I'd say that probably isn't how cards are meant to be used.

After reading through the relevant guidelines, I found no specific mention of cards embedded in cards, but I did find guidelines on what gestures are supported for cards. The fact that the "pick up and move" gesture, for example, is supported for cards makes me think that these elements should not be nested.

Answer 6

Cards should not be within cards.

Cards are meant to represent a single instance of something given a certain topic or context. By having nested cards, you are representing two different card contexts within the same container element. The nested cards should have their own container element, since they represent a different card context from their parent card.

Material Design - Cards

Using Card-Based Design To Enhance UX

Answer 7

An important aspect is what is the content of the cards (if is a homogeneous content that doesn't have many actions) and what is the width and the height of the items.

If your design is just for exemplifying the concept and we can discuss about a main card, 1200px x 1200px, for example, that will be the main container, with two cards within, I find this acceptable.

If the main card is small and the use of the cards inside distracts the user from being able to quickly scan, this is something not recommended.