NXT-13229: Updated Card to match the latest GUI

[alexandrumorariu]

Checklist

• I have read and understand the contribution guide
• A CHANGELOG entry is included
• At least one test case is included for this feature or bug fix
• Documentation was added or is not needed
• This is an API breaking change

Issue Resolved / Feature Added

I updated Card to match the latest GUI requirements

Resolution

Additional Considerations

In the design, it was requested that the container for the component does not change size for large text. In order to fit the new text with captions, label, and secondary label the design provided the solution of reducing the size of the image.
I added height:~"calc(var(--card-image-height) - 36px) for label where 36 was chosen because was the difference between all the line-height added to captions.

Links

NXT-13229

Comments

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.86%. Comparing base (316e850) to head (f07e740).
⚠️ Report is 8 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop     #344   +/-   ##
========================================
  Coverage    81.86%   81.86%           
========================================
  Files          153      153           
  Lines         7476     7477    +1     
  Branches      2249     2250    +1     
========================================
+ Hits          6120     6121    +1     
  Misses        1048     1048           
  Partials       308      308           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[daniel-stoian-lgp]

see my comments

Also, add in the PR description, the reason behind the calculation "height:~"calc(var(--card-image-height) - 36px)";"

[alexandrumorariu]

see my comments

Also, add in the PR description, the reason behind the calculation "height:~"calc(var(--card-image-height) - 36px)";"

Done