Docs/update card and breadcrumb

docs/components/breadcrumb/guide.md

@@ -18,7 +18,7 @@ Breadcrumb items are interactive. Users navigate to their respective location by
 
 ![Breadcrumb variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=20-352&mode=design&t=JS1Aklcq48swr0Im-1)
 
-- **Ghost**: By default, breadcrumbs appear in a ghost appearance. Switch  a solid appearance for higher visual emphasis.
+- **Subtle**: By default, breadcrumbs appear in a subtle appearance. Switch to a solid appearance for higher visual emphasis.
 - **Icon**: Breadcrumb items can, but don’t have to, include an icon. The icon is positioned before the breadcrumb label. Icons can be included for each item or only for specific items (e.g. the root item).
 - **Show child items on last item**: By default, the last item of the breadcrumb doesn't offer any user interaction. An interactive item variant is available which allows the user to browse to child pages of the current page. Pressing the item triggers a dropdown listing all child elements.
 - **Visible item count**: By default, breadcrumbs display a limited number of items. This number can be adjusted.
@@ -48,4 +48,4 @@ Interactive items can take one of four states: Default, hover, active and focuse
 - [Dropdown](../dropdown)
 - [Basic navigation](../../legacy/basic-navigation)
 - [Map navigation](../../legacy/map-navigation)
-- [Workflow](../workflow)
+- [Workflow](../workflow)

docs/components/card/guide.md

@@ -5,39 +5,35 @@ doc-type: 'tab-item'
 
 Cards make it easy for users to quickly scan small chunks of information. We typically use cards to create dashboards or modular, flexible designs that adapt seamlessly to various screen sizes. Additionally, cards can be used to draw attention to important content and serve as an entry point to deeper levels of navigation or detailed views.
 
-Cards are interactive elements. The entire container is clickable and triggers a single action.
+We offer three types of cards:
+1. **Cards:** Use flexibly to display various types of content e.g. images, charts or key data.
+2. **Action cards:** Use to trigger key actions, similar to [buttons](../button).
+3. **Push cards:** Use to display notifications and additional content related to the notification value.
 
-![Card overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4956&mode=design&t=RDimbEsIHFIXIByo-1)
+![Card overview](https://www.figma.com/design/tfahbu7mmoTEDYYFYE2XmB/Update-card?node-id=7006-24531&t=ezJ14BAYO4fXC1jm-4)
 
+**Card**
+1. Card container
+2. Card content
+
+**Action card**
+1. Icon
+2. Heading
+3. Subheading
+
+**Push card**
 1. Icon
 2. Notification
 3. Heading
 4. Subheading
-5. Expandable
-6. Container
-7. Expanding content
-
-## Card types
-
-We currently offer two types of cards: **action** and **push**.
-
-Action cards have an icon, a heading and a subheading. We use them to trigger key actions.
-
-Push cards contain a notification value in addition to the icon, heading, and subheading. These cards have an expandable section placed at the bottom of the container. When clicked, the expandable section displays additional content. The notification value is logically related to the items shown in the expandable area. Push cards have a fixed content height of 11rem that cannot be changed.
-
-![Card types](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4953&mode=design&t=RDimbEsIHFIXIByo-1)
-
-## Customization
-
-We also offer a card container component that enables designers to display various types of content, such as images, charts or key data. Some small rules apply: Background images can stretch over the complete size of the container, whereas the card content must maintain a default padding of at least `1rem`.
-
-![Card examples](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1329-26613&mode=design&t=sOZRNgWt7R52iLSF-1)
+5. Expand area
+6. Expandable content
 
 ## Variants
 
 Cards are available in nine variants:
 
-* Outline
+* Outline: Use as default for a balanced and subtle appearance.
 * Filled
 * Alarm
 * Critical
@@ -47,32 +43,42 @@ Cards are available in nine variants:
 * Neutral
 * Primary
 
-Each variant emphasizes different aspects to guide the user's attention. These variants differ visually through the presence of an outline and a distinct container fill color, but they all follow the same interaction pattern. We typically use the outline variant as the default choice as we find this creates a more balanced and subtle appearance for users.
+Each variant emphasizes different aspects to guide the user's attention. These variants differ visually through the presence of an outline and a distinct container fill color, but they all follow the same interaction pattern.
 
 ![Card variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4969&mode=design&t=RDimbEsIHFIXIByo-1)
 
 ## Options
 
-- **Icon**: Cards can, but don’t have to, include an icon. The icon is positioned in the top-left corner of the container.
-- **Notification**: By default, push cards display a notification value at the top of the container. This value is logically related to the items displayed in the expanding content area.
-- **Heading**: Cards can, but don’t have to, include a heading. The heading is aligned to the top-left corner of the container.
-- **Subheading**: Cards can, but don’t have to, include a subheading. The subheading is aligned to the top-left corner of the container and positioned below the heading.
+- **Card:**
+	- **Selected:** Use the selected state to indicate that the corresponding action is currently active.
+	- **Content area:** Cards can contain various types of content e.g. images, charts, key data. It is positioned below the heading and subheading. We recommend a padding of `1rem`.
+- **Action card & push card**:
+	- **Selected (action card only):** Use the selected state in action cards to indicate that the corresponding action is currently active.
+	- **Icon:** Use icons that are widely recognized by users for the intended action.
+	- **Notification (push card only):** By default, push cards display a notification value at the top of the container. This value is logically related to the items displayed in the expanding content area.
+	- **Heading:** Display a heading in the top-left corner of the container.
+	- **Subheading:** Display a subheading below the heading to provide additional context.
+	- **Expandable content (push card only):** Push cards can include an expandable content area that reveals additional information when expanded. This area is positioned below the subheading and is hidden by default.
 
 ## Behavior in context
 
-- **Interaction**: As a general rule, the entire card container is interactive and clickable. If the card also contains interactive elements, the corresponding actions are triggered.
-- **Size**: By default, cards have a fixed width and height. However, content overflow is not managed automatically, so the card size must be manually adjusted.
-- **Placement**: We typically group cards and position them at the top-left corner of the page or content area. Within the group, cards can be organized into lists or grids using the [card list](../card-list) component.
+- **Interaction:** As a general rule, the entire card container is interactive and clickable. If the card also contains interactive elements, the corresponding actions are triggered.
+- **Size:**
+	- By default, cards have a fixed width and height. However, content overflow is not managed automatically, so the card size must be manually adjusted.
+	- Action cards have a default width and height which can be adjusted to fit nicely in layouts.
+	- Push cards have a fixed height and a default width. The width can be adjusted as needed.
+- **Placement:** We typically group cards and position them in the top-left corner of the page or content area. Within the group, cards can be organized into lists or grids using [card lists](../card-list).
 
+![Card examples](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1329-26613&mode=design&t=sOZRNgWt7R52iLSF-1)
 ## States
 
-Cards can take one of three states: Default, hover and active. Action cards also offer a selected state.
+Cards have four states: Default, hover, active and focused.
 
 ![Card states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4979&mode=design&t=RDimbEsIHFIXIByo-1)
 
 ## Dos and Don’ts
 
-- Do group cards in lists or grids (use the [card list](../card-list) control)
+- Do group cards in [card lists](../card-list) or [grids](../grid)
 - Do keep multiple cards equal in size
 - Don’t nest cards inside each other
 - Don’t use cards to collect user input