I'm looking for the exact name of the UI card (?) element marked with the red dashed lines here that is often used for product purchases. Does anyone know the name of it?

enter image description here

  • 3
    Is it called a card? It basically a tab interface floating around though.
    – joojaa
    Jan 13, 2020 at 15:40
  • I don't doubt that some people give it a name, but it's a pretty diverse group of items to have only one name. It's got headlines, product description text, one or more command buttons, icons, bullet points, price, and so on.
    – user8356
    Jan 13, 2020 at 16:18
  • What exactly is it you are trying to say?
    – ChrisBean
    Jan 13, 2020 at 16:28
  • 1
    Doug... I call it Doug. :)
    – Scott
    Jan 13, 2020 at 18:08

3 Answers 3


This is called a SlidingUpPanel - given that one has this sort of interaction behavior with the element in mind:


enter image description here

Searching for SlidingUpPanel as UI element delivers the best search results as well as the most ready to use components out of various frameworks.

  • I guess from a developer's point of view you're right.
    – Luciano
    Jan 14, 2020 at 13:17

Those are simply called "cards" in every environment that I've seen them in. You could add other descriptors in this case, such as "flat", "rounded", and "low contrast" (the text in the images you show would likely fail an accessibility audit). But they are just cards. Searching for "checkout card" or something similar can get you more examples.


I call them popovers. As they pop over the content. It's very much seen in the iOS UI. enter image description here

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.