If I were to follow elevated card(first one) like here, where should I place the expand more arrow? Also, is it okay to do the same card with image on the left?

Cards displayed are different brands of the same product. So I feel a full rich media is too much?

The screen has multiple tab items cards like these for each tab. Any place I can get examples of similar card designs other than material.io? Thank you.

bumped to the homepage by Community 2 days ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.


I would say let it be the last item on the card, centered and on a separate line.

  • 1
    Could you expand on this post? Right now it's more of a comment than an answer. – Mayo May 12 '18 at 1:57

The best place for placing expand button/arrow is last place (at the right) in card's actions line, as the previous quidelines say. Here is the preview:enter image description here Expand button is focused with green colour.

  • The cards will be displaying price lists of different quantity of sub be with brand name as title. So isn't full rich media too much for every card? Do you have any examples or where I can find some sample designs? – nandu May 14 '18 at 6:33
  • It could be a better way if you'll upload a simple mockup for your card and we'll could find a more accurate solution. – touchthedot May 14 '18 at 6:36
  • Something like this this? Please forgive my design handicapped drawing. – nandu May 14 '18 at 9:25
  • Or this ? – nandu May 14 '18 at 10:45

Look at the "Dividers" section in your link - there's an example of expander (used as an action):

"Expand" as an action

Another example is in "Behavior", "Transitions" section: expander as n icon, or expanding to full screen:

Expander as an icon

And answering your question about a card having an image on the left: yes, there are examples of crads with different locations of the image:

enter image description here

Please note, that the card should "contain content and actions about a single subject", so having tabs on your card might not be the best idea - I'd try cards having only indicative short info about an item, and transitioning to separate page on card click. There you can have tabs and any other pattern you'd like.


If you want to include the expansion card by showing three contents I think this solution will help you following Google Materials. Using tabs will help keep your card clean and the area will be occupied for every topic. Please check this

enter image description here

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.