I have a grid list made of cards. Each one of this cards contains 4 list item. If the user tap on the list item, the card is expanded in order to become a hero and to show the contents related to that list item. The icon must convey that the element is an interaction element, but it should also communicate that it is not simply a link or an accordion.

  • Can you add images of what you have?
    – jazZRo
    Jul 15, 2016 at 11:10
  • In this moment I have only a wireframe of it, but I'm not sure I can share it, according to company policy. :( Jul 15, 2016 at 12:24

2 Answers 2


I'd suggest trying to find an UI pattern that fits this purpose - so users are familiar with it, and will find it intuitive to click there to 'expand' and have more content.

In your case, perhaps 'card expand' according to Google guidelines (Material Design? is a possibility?

Cards: https://material.google.com/components/cards.html Panels: https://material.google.com/components/expansion-panels.html

Or even the known '+' icon if it suits the functionality better. https://material.google.com/motion/material-motion.html#

enter image description here

  • Yes, actually I'm adopting the material as UI pattern, and I'm using cards... I was afraid in using arrows because in other parts of the applycations these opens detail panels. I think I will adopt a '+' icon ;) Jul 18, 2016 at 8:22

I would suggest an icon combined with text. Maybe the word expand or show more etc, something along those lines as there might not be a stand alone icon for exactly what you are needing.

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.