feat(core): update Card to latest design

[InnaAtanasova]

MORE UPDATES FROM STYLES WILL FOLLOW

Related Issue(s)

closes #11599

Description

The current PR

• adds main, extended and numeric sections to Card header (this is a Breaking change)
• refactored Card elements to use signals
• added interactive cards
• added Media cards
• updated the documentation examples with the breaking changes
• NOTE: missing unit tests

BREAKING CHANGE:

• badge can now accept an icon and a color (badgeColor and badgeColorSecondary). Can also set aria-label attribute (badgeAriaLabel)
• card by default is non-interactive. Can be set to interactive with interactive property set to true
• interactive Cards must be with role listitem and inside a list fd-card-list
• the Card header (main header) by default is not interactive, can be set to interactive with interactive property set to true. For example: <fd-card-main-header [interactive]="true">
• the elements of the Card header now need to be wrapped in <fd-card-main-header> container

Before:

<fd-card-header>
    <h2 fd-card-title>Card Title</h2>
</fd-card-header>

After:

<fd-card-header>
    <fd-card-main-header>
        <h2 fd-card-title>Card Title</h2>
    </fd-card-main-header>
</fd-card-header>

[netlify]

✅ Deploy Preview for fundamental-ngx ready!

Name	Link
🔨 Latest commit	8c1ebe5
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-ngx/deploys/6643c9b0bac73a0008729c4b
😎 Deploy Preview	https://deploy-preview-11730--fundamental-ngx.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 site configuration.

[github-actions]

Visit the preview URL for this PR (updated for commit 8c1ebe5):

https://fundamental-ngx-gh--pr11730-feat-card-header-new-iq7js2l0.web.app

_{(expires Fri, 17 May 2024 20:31:24 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 41b993ee8e451bd7c6770b342ce142dc886eacff}