Merge pull request #363 from Infineon/361-documentation-card

Added card usage.mdx, added documentation & images

packages/components/src/components/card/Usage.mdx

@@ -0,0 +1,137 @@
+
+import { Meta } from '@storybook/blocks';
+
+import * as CardStories from './card.stories';
+import CardAnatomy from '../../../public-storybook/images/card/card-anatomy.png';
+import CardFirstActionArea from '../../../public-storybook/images/card/card-first-action-area.png';
+import CardHorizontalAlign from '../../../public-storybook/images/card/card-horizontal-alignment.png';
+import CardHorizontalFirstActionArea from '../../../public-storybook/images/card/card-horizontal-first-action-area.png';
+import CardHorizontalMobile from '../../../public-storybook/images/card/card-horizontal-mobile.png';
+import CardHorizontalSecondActionArea from '../../../public-storybook/images/card/card-horizontal-second-action-area.png';
+import CardHorizontalStates from '../../../public-storybook/images/card/card-horizontal-states.png';
+import CardSecondActionArea from '../../../public-storybook/images/card/card-second-action-area.png';
+import CardSimple from '../../../public-storybook/images/card/card-simple.png';
+import CardStates from '../../../public-storybook/images/card/card-states.png';
+import CardWithButton from '../../../public-storybook/images/card/card-with-button.png';
+import CardWithLink from '../../../public-storybook/images/card/card-with-link.png';
+import CardWithTextLink from '../../../public-storybook/images/card/card-with-text-link.png';
+
+
+<Meta of={CardStories} />
+
+
+# Card
+The card component provides users with a flexible layout for displaying various types of content. Cards can accommodate different functionalities, content types, and sizes, allowing designers to create visually appealing and informative card-based interfaces.
+
+## Usage
+
+### When to use
+-   To present information or content in a visually appealing and organized manner.
+-   To showcase a combination of image, text, and a button for user interaction.
+-   To incorporate various content elements instead of a button and allow for more flexibility.
+-   To represent a hierarchical flow of information.
+-   To display content elements side by side, with equal importance like products or news.
+
+### When not to use
+-   If the content you need to display is minimal or doesn't require any specific visual organization.
+-   If the content doesn't align with the available card variants (default card, text card, or additional functions card).
+-   If the visual hierarchy of the content doesn't align with the vertical or horizontal layout.
+
+## Anatomy
+<img src={CardAnatomy} alt="Card Anatomy" />
+
+**Card Image (1)**\
+A linked image which corresponds to the cards' content.
+
+
+**Card Overline (2)**\
+An overline appears above the card title to provide additional context. 
+
+
+**Card Title (3)**\
+A core text element that briefly summarises the theme of the card. 
+
+
+**Card Body (4)**\
+The main content area of the card where the text copy is placed. The text should not be longer than **three lines**.
+
+
+**Additional interactive elements (5)**\
+Another optional elements that can contain additional actions like a button or links related to the card content.
+
+
+**Card Container (6)**\
+The outermost container that wraps the entire card. It is surrounded with a border.
+
+
+## Layouts
+
+### Vertical
+The vertical card Layout is the default and most commonly used layout. It consists of a single column of content and is ideal for presenting a compact summary of information.
+<img src={CardSimple} alt="Card Simple" />
+
+### Horizontal
+The horizontal layout is an alternative style of the card component, optimized for displaying content in a horizontal arrangement. It is particularly useful for showcasing images and brief descriptions. It is also possible to switch the image- and textual area. Note that some functionalities available in the vertical layout may not be applicable to the horizontal layout. For example, there is no "Button" and "Text Link" available.
+<img src={CardHorizontalAlign} alt="Card Horizontal Align" />
+
+## Mouse interactions
+The card without buttons or links is completely clickable and leads the user to its corresponding detail page. It is also possible to add another action area to the card where you can insert buttons or links. The action area itself is not hoverable/clickable, so that the buttons and links have enough interactive space.
+
+### No Button/Link
+Simple card which is linked to a specific internal page.
+<img src={CardSimple} alt="Card Simple" />
+
+
+### Bold Link
+A prominent link can be added to the vertical card, visually distinguished by being rendered in bold and accompanied by an arrow icon. This link style could be used to  redirect the user to a new page and not the corresponding one. A **maximum of two** text links should be used.
+<img src={CardWithLink} alt="Card with link" />
+
+
+### Text Link
+The card may contain "text" links that offer additional actions to the user. For example, "Quick view" or "Data sheet" links provide quick access to specific actions related to the card content before clicking on the card itself. A **maximum of three** text links should be used.
+> Text Link is not available in the horizontal layout.
+
+<img src={CardWithTextLink} alt="Card with text link" />
+
+
+### Secondary Button
+A secondary button can be included, which serves as a direct action to improve or modify the content presented in the card. **Only one** button should be used.
+> Secondary Button is not available in the horizontal layout.
+
+<img src={CardWithButton} alt="Card with button" />
+
+
+## States
+The card has two different states: default and hover. While hovering over a card the card-border and the card-title is colored in ocean-500.
+
+### Vertical
+<img src={CardStates} alt="Card States" />
+
+### Horizontal
+<img src={CardHorizontalStates} alt="Card Horizontal States" />
+
+## Action areas
+
+### First action area
+The fist action area is fully hoverable/clickable.
+<img src={CardFirstActionArea} alt="Card First Action Area" width="50%" />
+<img src={CardHorizontalFirstActionArea} alt="Card HorizontalFirst Action Area" />
+
+### Second action area
+If the second action area with buttons or links is activated, only these bring their native interactivity.
+<img src={CardSecondActionArea} alt="Card Second First Action Area" width="50%" />
+<img src={CardHorizontalSecondActionArea} alt="Card Horizontal Second First Action Area" />
+
+## Mobile
+
+### Vertical
+The layout of the vertical card remains the same in all viewports. Only the font size of the title changes slightly.
+
+### Horizontal
+While the title, description and interactive elements are retained in desktop viewports, the description is deactivated in mobile viewports.
+<img src={CardHorizontalMobile} alt="Card Horizontal Mobile" />
+
+
+***
+Check out the Figma component: **[Card](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=2420-2421&mode=design)**
+***