✨ Enhancement: Create a card component to be able to standarize the usage of list of cards

[benjagm]

Is your feature request related to a problem? Please describe

No

Describe the solution you'd like

We are working in different issue that require usage of cards like #426 and #421 and it will be beneficial to have a standard card component to be able to use across.

Examples for reference:
Use Cases

Docs Landing

I think the best approach is follow the design used in these card of the landing page:

The card should support:

• Mandatory: Title
• Mandatory: Body
• Optional: Icon
• Optional: Link

Describe alternatives you've considered

No response

Additional context

No response

Are you working on this?

No

[benjagm]

@TamannaVerma99 and @VivekJaiswal18 please use this card component for your development.

[VivekJaiswal18]

Okay thats good!

[VivekJaiswal18]

@benjagm where should we add the navigation button for routing

[TamannaVerma99]

okay great!!

[divyaxdv]

@benjagm can you please assign this to me? I am very much intrested in contributing to it.

[Michael-Obele]

Is anyone assigned to this? I'd love to do it or collaborate with them.

[benjagm]

@Michael-Obele please go ahead with this one. Thanks.

[TamannaVerma99]

Hey! @benjagm
As I have to use this component to proceed with the welcome page issue so should I wait for this issue to get completed first?

[divyaxdv]

@Michael-Obele let me know if I could assist you in any way. I would be pleased to help .

[Michael-Obele]

@Michael-Obele let me know if I could assist you in any way. I would be pleased to help .

I will, thanks.

[Michael-Obele]

Hey guys, I apologize for taking so long to send this PR. I would appreciate your feedback on the design, particularly how it looks with an icon.

[ayushtiwari110]

Hey there @benjagm ,
I just came across this task. The progress done so far is great. I had a suggestion that we can use composition logic for making the Card component. We can refactor the current code for this logic. It'll benefit us in following way:

• Break Down Functionality: Individual card elements (image, title, description, buttons, etc.) could become smaller components.
• Compose the Card: The main card component could then compose these smaller pieces together, using props for layout and any essential overarching data.
• Here's an article for reference: Why and how to use component composition in React
  I guess if the card component would be having a consistent UI across different usecases, we can still go with the current design. But if the design would be varying, I believe building it in compositional way would be helpful in increasing reusability of the card component.
  I would like to hear your opinion on this.

[Michael-Obele]

Hey there @benjagm , I just came across this task. The progress done so far is great. I had a suggestion that we can use composition logic for making the Card component. We can refactor the current code for this logic. It'll benefit us in following way:

• Break Down Functionality: Individual card elements (image, title, description, buttons, etc.) could become smaller components.
• Compose the Card: The main card component could then compose these smaller pieces together, using props for layout and any essential overarching data.
• Here's an article for reference: Why and how to use component composition in React
  I guess if the card component would be having a consistent UI across different usecases, we can still go with the current design. But if the design would be varying, I believe building it in compositional way would be helpful in increasing reusability of the card component.
  I would like to hear your opinion on this.

Hey, thanks for taking a look at the PR! I really appreciate the suggestion about using component composition for the card component. It's a great idea, and I actually started down that path by creating a CardBody component.

Here's why I held off on going too much further with breaking things down:

• Logic is pretty simple: Right now, the only real logic in the card is for the link; if there's a link, we wrap everything in it. Everything else is pretty straightforward: show it if there's data, hide it if not (except for title and body, which are required).
• Keeping things uniform: Breaking it down too much might give us a lot of flexibility, but that could also make it harder to keep the cards looking consistent across the app. Uniformity is a big goal here.
• Keeping it simple: While there are benefits to breaking things down, it can also add complexity. More components might mean more verbose code with lots of props to pass around, and potentially more documentation needed to explain how to use it all.

So, like you said, it is a great idea! I'm definitely open to revisiting this if we start needing more flexibility with card layouts in the future. But for now, I think this approach keeps things clean and easy to manage.

[ayushtiwari110]

@Michael-Obele Yeah I do agree with that. Since our current goal is to keep the cards consistent across the app, we can go ahead with current approach. In future we may revisit to this when we feel there are more requirments with the Card component.

[Michael-Obele]

@Michael-Obele Yeah I do agree with that. Since our current goal is to keep the cards consistent across the app, we can go ahead with current approach. In future we may revisit to this when we feel there are more requirments with the Card component.

Sounds good, thanks for understanding!

[benjagm]

Closed as completed.