What's the difference between Card and Surface

[AndreaPontrandolfo]

Right now it's really really unclear when it's best to use Surface vs when to use Card.
Maybe Surface is unnecessary? Could we merge it into Card? Or could the docs be improved to outline the important differences based on the use-cases?

[vvv-sss]

Hey, thank you for your feedback!

According to our docs:

• Surface is a container component that provides elevation and background styling.
• Card is a container with flexible layout sections for structured content.

Basically, Surface is a styled view with different levels. You can use it whenever you need, with no limitations.

At the same time, Card provides layout sections such as header, body, footer, and helper components such as title and description. Card is built on top of Surface, and its main purpose is to be used as a card.

Surface is a more generic component, while Card has its primary purpose.

I will think about how to improve it. If you have any suggestions, feel free to share them!

[AndreaPontrandolfo]

Heh, it just feels like pointless duplication, everytime i need this, i always waste time asking myself wheter i should use the Surface or the Card...
Isn't without its sub-components (Card.Title etc...) basically the same as Surface?

Which means: ===

But whats the points of Surface then?

[vvv-sss]

Surface is more of a utility component. It's used to create an elevation hierarchy on your screen, while Card is for displaying data. Let's say you want to build a marked-up UI like the image. Would you use Card? What's more semantically appropriate, placing this content on Surface or Card?