feat(docs): update card xplat topic

[IMinchev64]

Closes #451

Update the card xplat topics

Also updated the samples:
Angular -> IgniteUI/igniteui-angular-samples#4048
React -> IgniteUI/igniteui-react-examples#1096
WC -> IgniteUI/igniteui-wc-examples#1292
Blazor -> IgniteUI/igniteui-blazor-examples#1320

Checklist:

• check topic's TOC/menu and paragraph headings
• Include TOC topic labels in the topic content when it has a valuable update, is new, or is considered preview / beta
• link to other topics using ./page.mdx or ../relative/path.mdx (.mdx extension required)
• at the References section at the end of the topic add links to topics, samples, etc
• reference API documentation instead of adding a section with API

• use valid component names - [Data] Grid, IgxSelectComponent, <igx-combo>
• use spell checker tool (VS Code, Grammarly, Microsoft Editor)
• add inline code blocks for the names of classes / tags / properties
• add language descriptor for the code blocks
• check if links function by running the check-api/mdx npm commands
• check if sample is working and fully visible in the topic
• check if sample is working and fully visible in the StackBlitz
• check if code blocks match the code in StackBlitz demo
• add or update meaningful llms.description metadata and run npm run check:llms-metadata

• follow SEO guidelines to fill topic's metadata (SEO guidelines)

• do not resolve requested changes (leave that to the reviewer)

[DiLazarova]

Card Component

Webcomponents = React = Blazor

The structure remains the same for those 3 platforms.

1. Live Demo section for the Card is missing!
2. In Do/Don’t section + Image from Design Documentation

Link to Design Documentation: https://www.infragistics.com/products/indigo-design/help/components/card#card-layout

I had trouble accessing the Angular platform:

[DiLazarova]

Review and Test for Card Topic

General: When possible the component frame to be updated according the design:
Figma Design

React
Google Chrome

1. The Card to be in align in the center with top/bottom padding of min 60 pix

2. One missing example for Actions Orientation

3. Example for Styling with Tailwind is missing

Web Components + Angular

1. Only this example need to be align in the center with 60 pix top and bottom padding

Blazor

1. No examples are available.

[IMinchev64]

On Angular, CardContent, CardMedia, Button, IconButton and Ripple don’t resolve. The real symbols are IgxCardContentDirective, IgxCardMediaDirective, IgxButtonDirective, IgxIconButtonDirective and IgxRippleDirective. They currently render as plain text like IgxCardMedia, which isn’t a real type. Please add Angular blocks with type="...Directive" for these.

There are three other places in the mdx where this happens

[IMinchev64]

kind="sass" only resolves on Angular, because the xplat sites have no sassApiUrl. On React, Web Components and Blazor this renders as a dead link to #. Please wrap it in an Angular block and use plain card-theme code text for the other platforms, as in the radio topic.