0

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.

Improve this question

5 Answers 5

Reset to default
0

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

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

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.

Improve this answer
4
  • 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, 2018 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, 2018 at 6:36
  • Something like this this? Please forgive my design handicapped drawing.
    – nandu
    May 14, 2018 at 9:25
  • Or this ?
    – nandu
    May 14, 2018 at 10:45
0

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.

Improve this answer
0

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

Improve this answer
0

enter image description here

The card container is the only required element in a card. All other elements shown here are optional.

  1. Container Card containers hold all card elements, and their size is determined by the space those elements occupy. Card elevation is expressed by the container.

  2. Thumbnail [optional] Cards can include thumbnails to display an avatar, logo, or icon.

  3. Header text [optional] Header text can include things like the name of a photo album or article.

  4. Subhead [optional] Subhead text can include text elements such as an article byline or a tagged location.

  5. Media [optional] Cards can include a variety of media, including photos, and graphics, such as weather icons.

  6. Supporting text [optional] Supporting text include text like an article summary or a restaurant description.

  7. Buttons [optional] Cards can include buttons for actions.

  8. Icons [optional] Cards can include icons for actions.

Improve this answer
1
  • Hi Girish, where should the OP place the expand arrow? Is it okay to do the same card with image on the left? There are some questions that were not answered by your answer.
    – Nash
    Feb 4, 2021 at 8:46

Your Answer

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

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