All posts
Alex S. from Reliqio under two product cards, with the title "Stop removing card background."

Stop removing backgrounds from cards.

Alex S.Head of UX/UI at ReliqioUI/UXE-commerce
  1. Stop removing backgrounds from cards.
  2. You've probably seen a lot of advice like this, with examples from Airbnb, Apple, Netflix.
  3. Clean cards, no background.
  4. That all works when a card shows just an image, a title, and small details.
  5. And on the canvas, it really looks like a good solution.
  6. But what if your card has a price, rating, text, and maybe a button?
  7. Without a background, everything floats.
  8. In a grid, it turns into a mess, and users quickly get lost and don't know where to look.
  9. A background groups all that info together.
  10. It's called the common region principle.
  11. So give each card a background and place them closer.
  12. Now the grid is easy to scan.
  13. Minimal isn't always better.
  14. For more on design, check out our website, link in my profile.

Borderless cards are a popular trend, with Apple, Netflix and Airbnb as the usual examples. This video shows the other side of it.

Key points:

  • Borderless works when a card shows only an image, a title and small details.

  • With a price, rating, text and a button, content floats and a grid turns into a mess.

  • A background groups it all together: the common region principle. Cards with backgrounds, placed closer, are easy to scan.

  • Minimal isn't always better: the right choice depends on the content.

Most useful for designers working on product lists and catalogues.