20

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.

enter image description here

Improve this question
2
  • 2
    Card within a card - Cardception – Slartibartfast Oct 5 '16 at 2:47
  • 1
    I think from the replies below you should reconsider your design, however, the material design guidelines are guidelines. Now if you content contained relationships to the primary card then there is no reason why you couldn't include it. You may wish to remove the card 'chrome' though. I'd really like to understand the type of content you'd need to nest before deciding if this was the right visual direction to take. – jamesy Dec 1 '16 at 15:19
8

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:

enter image description here

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

Improve this answer
17

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
Improve this answer
5

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.

Improve this answer
3

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:

enter image description here

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).

Improve this answer
2
  • 1
    Welcome to UX.SE Meli! This is a nice answer, but IMHO you're missing the Material metaphor. Think of Material as if you have a notebook where you add elements, let's say stickers. These stickers will be all different. Name them tab, list, whatever. However, you're NOT allowed to place a sticker over an existing sticker, they all need to be hold the same weight and z-index. Hence, all the stickers are coplanar, just like you say, but you can't have a sticker inside the sticker (on a side note, the new Material site is anti-material and an UX nightmare) – Devin Feb 16 '17 at 0:35
  • sorry about the mistakes. Where I said "notebook" I meant sheet of paper and where I said need to be hold I meant need to hold – Devin Feb 16 '17 at 17:20
2

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.

Improve this answer
2

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

Improve this answer
1

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.

Improve this answer
1
  • As all of the other answers have already stated, cards can't act as containers for other cards. – Andre Dickson Oct 9 '16 at 0:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.