Support Card component

[prakhargupta1]

Summary 💡

https://mui.com/material-ui/react-card/

The metric component and paper component are already available in Studio. Metric component has props to conditionally format the metric and assign labels.

A paper component is used to compose layouts. Any custom card could be created by dropping image, text or other components.

Are there more features that should be supported?

Benchmarks

• https://blocks.tremor.so/blocks/kpi-cards

[bytasv]

What's the user's expectation for this component? Should we allow user to build custom cards using individual card sub-components that MUI support, or should we use one predefined card layout, i.e.:

Or something else?

[prakhargupta1]

The numbers on a dashboard can be in a card component, like Stats #2025

Eg:

https://marmelab.com/ra-enterprise-demo/#/

[bytasv]

Would expect that you can drag and drop different card sub-components on the canvas to build the layout of your own or should we have some predefined layouts:

1. I.e. we allow users to drag Card, CardHeader, CardNumber, etc... components onto the canvas
2. We provide only Card component, but it has prop to control layout and props for different values

[prakhargupta1]

We can provide a basic template constituting header, content and action.

Furthermore, adding/removing sub-components should be allowed. And these sub-components will be the existing components from the catalog. Later on, adding icon on a card would also be possible. When a user will click on a sub-component then it's props will show up in the right panel. Eg: Retool.

[prakhargupta1]

Q1. Should we replace Paper with Card? I doubt paper component will be used too much, also card component is build over paper component. Instead of paper, I think users would be interested in a Container/box type of component for scenarios where they want to club components together. Eg: Show button and data grid together. I had been using paper for this use case.

Q2. What difference does it make if I use card media vs I drag image component and use it as a sub-component of card?

[apedroferreira]

Q1. Should we replace Paper with Card? I doubt paper component will be used too much, also card component is build over paper component. Instead of paper, I think users would be interested in a Container/box type of component for scenarios where they want to club components together. Eg: Show button and data grid together. I had been using paper for this use case.

Q2. What difference does it make if I use card media vs I drag image component and use it as a sub-component of card?

Q1: The Card component would be pretty different from the Paper component we have in my opinion, so maybe it makes sense to keep both... But it's true that maybe people won't use the Paper component a lot. But yes, right now the Paper component is the only component we have that allows us to compose layouts, so it would definitely be a good idea to have a more generic component to do that.

Q2: I'm not sure how much our current Image component is ready to be used in Cards - probably the images added with CardMedia are more suited to be used in a Card component and look good. But with enough work I guess that both approaches should be possible?

[apedroferreira]

About Q1 here, I just realized that if we allow dragging-and-dropping into the Card component it could actually be almost exactly like our current Paper component... In that case we shouldn't have both.

[prakhargupta1]

About Q1 here, I just realized that if we allow dragging-and-dropping into the Card component it could actually be almost exactly like our current Paper component... In that case we shouldn't have both.

Yes, paper component is not in any of the other tools. Most likely because of what you mentioned. So, I think changing paper to card makes sense as it will allow more card props available to be used.