Kayla team member card

[KaylaYuChen]

Make the Team Member Card

Checklist:

after creating your PR please mark all of these:

• Global colors were used (let us know if any are missing)
• Text/images/paths are not hard coded (passed in by props)

Notes & Questions for Kyhara and Austin:

1. I'd like the card to have more space from the edge of the screen so it feels less tight in the layout. I initially tried increasing the border-radius, but that did not change the spacing. Can you guide me on the correct approach for adding more outer spacing?
2. I had to use this color #e6e6e6 to match the color for the placeholder background. Is there a better color I could use?
3. I adjusted the border weight and landed on this as a compromise. Please let me know how I could adjust it closer to the example.
4. I understand that images will eventually be added to the card. Could you provide guidance on best practices for updating the component when real images are used? Should I worry about this after the Team Group is created?

[austin1im]

the screenshot is just meant to be referred to so you know what to work on, you should refer to figma for actual design implementation, a lot of the sizing is off. for this component specifically i want you to ignore spacing between others as that will be handled elsewhere, only focus on creating this block for the image, name, title, etc. background color will also be handled by the parent. the background color as a placeholder is fine imo but you should confirm with designer. for the image, you should probably take the src in as a prop which you already did. im not sure if ur referring to images in terms of cms or parent component but for cms images will be handled by essentially instead of fetching from public, we will fetch the image from an api so as long as u it accepting the image prop its fine. for parent component, it will map a bunch of the team member card components with a imagesrc included in each object

[austin1im]

read da other comment

[austin1im]

no px unless image

[KaylaYuChen]

done

[austin1im]

ur width amount is incorrect

[austin1im]

border radius is also not needed here

[KaylaYuChen]

done

[austin1im]

no need to set height width

[KaylaYuChen]

removed

[austin1im]

margin-top amount is wrong

[KaylaYuChen]

I don't see notes on figma for this. I even everything out. How about now?

[austin1im]

there's a placeholder image now, could u make it display that instead

[KaylaYuChen]

done