5

The material design guidelines suggest to use lists for homogeneous content and cards for mostly heterogeneous content. It also suggests that if the content is more than 3 lines long then use cards instead of lists. Does it mean even for homogeneous content which may be longer than 3 lines but will still have the same structure for all items, we should use cards?

Some examples would be great.

2
  • Can you please provide more info? Does the content have a title? Can it be shortened? Does it have any other form of data such as dates create, users, pictures? Commented Apr 8, 2016 at 14:57
  • @alexbouchard In my case the content predominantly contains text, with possibly a score for the text, and i also display the index number of the list item.
    – gaurav5430
    Commented Jun 27, 2016 at 12:41

2 Answers 2

2

It's usually best to present homogeneous (comparable) information as a list rather than as cards. The Android Gmail app is a good example of a list. Although there are more than three lines available per email, the email list shows only the sender, subject, and first line of text. This is appropriate because email is often repetitive and the user often doesn't need to read the email to know what's in it; the summary is sufficient.

However, if no reasonable summary is possible for the information you're presenting, you should definitely use cards instead of a list. The Material Design specs are clear: "To display more than three lines of text, use a card."

If you're thinking about going beyond the Material Design guidelines, the Salesforce Lightning Design System has an example of a list-like control with varying row heights and sometimes many lines of text:

Activity Timeline example

In this example, you can see that the controls on the right become irregularly spaced, which looks messy (especially on wide screens), but the controls on the left always look tidy due to the vertical lines connecting them. Without the vertical lines, this example would be all bad, but with the vertical lines, it's a good example of a control that's almost but not quite a list. It's possible that the widget you're creating is also not quite a list.

1
  • Not trying to compare list vs cards. I guess we can have a list of cards? Instead of a list of tiles?
    – gaurav5430
    Commented Jan 12, 2016 at 20:00
0

Using list for it should be better. Cards and such would be more space consuming for homogeneous contents. Extra spacing between each elements would be better if used to differentiate heterogeneous

1
  • Could you give any examples, as requested?
    – MJB
    Commented May 18, 2016 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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