| Token | Description |
|---|---|
| component name | Name visible in the structure. Can be changed or left as default. |
| title | Text title of the card. |
| subtitle | Subtitle of the card. |
| state: active | Card is marked as active. |
| state: disabled | Card is marked as disabled. |
| state: expanded | Card is expanded, can be combined with active. |
| event: On Change | Event triggered when a change occurs. |
| add event action | Defines a custom action added via the Action Editor. |
Cards can exist in the following states:
Active → Card is marked as active.
Disabled → Card is marked as disabled.
Expanded → Card is expanded and can be combined with Active.
Actions can be added through the Action Editor.
Supported event: On Change.
Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11550-252909&t=iosNC2AkSTGs5lMh-1 Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id5/4-card/card
title and optional subtitle; keep both clear and scannable. Express the main idea in title and supportive detail in subtitle; avoid duplicating content between the two.state: disabled.title short enough to avoid wrapping; place secondary context in subtitle so the header remains compact and readable.On Change to react to data or configuration changes inside the card (e.g., update related content, sync status).add event action so the card can trigger the exact workflow you need.state: expanded when data indicates details should be visible (e.g., initially show details for the most relevant card).state: disabled to reflect data-guarded conditions where the card should be visible but non-interactive until ready.| Do | Don’t | Article setting(s) |
|---|---|---|
| Write a short, specific title that names the card’s content. | Use vague titles or full sentences that wrap. | title |
| Use the subtitle for secondary qualifiers (e.g., status or brief context). | Repeat the title in the subtitle or add unrelated info. | subtitle |
| Mark the selected card as active for clear emphasis. | Indicate selection with content changes alone. | state: active |
| Disable cards that users shouldn’t interact with yet. | Leave non-functional cards appearing interactive. | state: disabled |
| Expand a card to show extended details when they’re needed. | Stuff all details into the collapsed view. | state: expanded |
| Combine expanded + active when the open card is also the current focus. | Toggle conflicting states unpredictably across cards. | state: expanded, state: active |
| Trigger logic on data changes instead of relying on silent updates. | Leave changes unhandled so the UI drifts out of sync. | event: On Change, add event action |
| Name the component clearly for maintainers. | Keep the default, non-descriptive component name. | component name |
title text so assistive tech conveys purpose even when the card is collapsed.subtitle brief to avoid verbose announcements; place only supportive context there.title/subtitle text and supported states (active, disabled, expanded).state: disabled to clearly communicate non-interactivity.state: expanded to control when additional content is exposed, reducing cognitive load in the collapsed view.