Versions Compared

Old Version 4

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version Current

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • 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

Guidelines

Configuring Toolbars

...

DoDon’tArticle 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

Accessibility

...

  • Provide meaningful, concise title text so assistive tech conveys purpose even when the card is collapsed.
  • Keep subtitle brief to avoid verbose announcements; place only supportive context there.
  • Avoid relying on color or decoration alone; communicate status via explicit title/subtitle text and supported states (active, disabled, expanded).
  • Use state: disabled to clearly communicate non-interactivity.
  • Use state: expanded to control when additional content is exposed, reducing cognitive load in the collapsed view.