feat(user card) - Update User card to new SHINE design (part 1)

[ttaylor-stack]

This ticket cover part 1 of the user card updates.

The following things will be updated in Part 2:

• Large size
• States
• Additional Bling

Ticket
Figma

[changeset-bot]

🦋 Changeset detected

Latest commit: 823cda0

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	823cda0
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/694a8e85be8ec40008286dbe
😎 Deploy Preview	https://deploy-preview-2092--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	823cda0
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/694a8e852948f10008818c0e
😎 Deploy Preview	https://deploy-preview-2092--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mukunku]

Hey @ttaylor-stack ,

I did a quick glance through the code and it overall looked good to me. Looking at the UI elements I noticed an issue with gaps, though:

Here's what I see in the designs:

[CGuindon]

Base should be using the 24x24 avatar size.

---

The padding in between the bling and the badge/rep number is created with a space character before the number. Should this be done with padding/gutter spacing instead? Would be 2px.

---

Is there any way to have 4px spacing in between badges when the count is showing vs 2px spacing when the count number isn't?

---

For responsive, when we need to wrap, I think we should keep certain blocks of info together (so the whole block wraps when the screen size is too short)

---

Got confused by my own section title — can we change this to "with user badges"?

OR — I'm wondering if we should also have a "with Bling" section OR should both of those just be in the Base section?

---

Should / could the Sizes be in the same section? Maybe in a table to get both descriptions or just the descriptions above separate by a paragraph and both sizes in the same code box?