This is very much related to Material Design List with a lot of information

The previous question and answer does not cover how to layout the information in a material card.

Let's assume I have some form of contact list.

  • Name
  • Skills (can be 0-~5)
  • City of residence
  • Age
  • Phone number (can also be multiple likely 1-2)
  • Email
  • Last Contact date (when did we last talk to this contact)
  • Our contact manager (which user in our system who is the main contact)

Are rectangular material cards a thing? that is, can it be much wider than high? Can it have columns?

Are email and phone considered actions? e.g. clicking them opens your email client or calls via facetime voice. and should they in this case go into material card button actions at the bottom?

How would you lay out this kind of information in a clear and readable way in a material card?

  • 1
    Hi Roger, welcome to UXSE. It might be valuable to point out which platform this is relevant for (desktop, mobile, all, etc...) in your question. Commented Jan 30, 2020 at 13:01

3 Answers 3


Depending on your context, could you group informations like;
-- Name, Age (or Name, City of residence)
--> Skills (can be chips material element if it fits here)
--> last contacted by Contact manager, on date
--> Phone, Email

If direct contact options brings you benefit you can place phone and email in form of actions. I.e. on mobile they can be action, on desktop you can offer option to copy them also.

Its better to have informations inline than in two columns. If you can group them like in example, you should have enough space.


Sure, a Card can be square or rectangular. Generally it shouldn't be larger than the screen (or rather the content area within which it resides), particularly because the lists that cards are usually hosted in leverage a partially displayed card as an affordance for the presence of more cards (i.e. hinting that this Card exists within a List).

Cards aim to provide a concise amount of information, enough for the User to make a necessary decision. They are not designed to offer lots and lots (or all) information, for that a Detail screen (that can be scrolled) would be more suitable. Would some of the content you listed be more appropriate in a detail screen while other content more suitable for making the decisions necessary for the business and use-case(s) for which the app/site is being built?

If email and phone calls are the main actions (i.e. deciding to call or email the person for whom the Card represents is the main decision the User is to make) then make them clear and easy to access. If they are not the highest priority actions then perhaps they would be better suited to an overflow menu?

Something to consider: legals vs. discrimination. If you show the age of a candidate (I am assuming these are job applicants), you leave the User/business prone to age discrimination bias and claims.


about having columns in Material design card I think it's possible for a card to have rows and columns. It helps you organize information and easier responsive design. About card actions I ask this question and then decide about it. What is this card for? If it is for showing information and calling and sending mail are not primary flows for card I guess they should not be in action area. Otherwise make them action buttons.

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.