Versions Compared

Old Version 1

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

Saved on

compared with

New Version 2

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

Saved on

Key

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

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Card

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11550-252909&t=iosNC2AkSTGs5lMh-1

Overview

  • The Card component is a container for grouped information.
  • It supports a title and subtitle as visual identifiers.
  • Cards can exist in active, disabled, or expanded states.
  • Actions can be assigned to trigger events, such as On Change.

...

  • Cards do not have a first and second toolbar.
  • Within all cards, only two actions are allowed:
  • More
  • Expand/Collapse (if the card supports this function).
  • Every card must always include a More icon.

Do's and Don'ts for using toolbars with cards

Usage

  • Use a Card to group related information and identify it with a concise 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.
  • Prevent interaction when prerequisites aren’t met by setting state: disabled.
  • Keep the title short enough to avoid wrapping; place secondary context in subtitle so the header remains compact and readable.

Interactions & Events

  • Use On Change to react to data or configuration changes inside the card (e.g., update related content, sync status).
  • Define custom behaviors with add event action so the card can trigger the exact workflow you need.

Data-Driven / Conditional Behavior

  • Drive presentation by setting state: expanded when data indicates details should be visible (e.g., initially show details for the most relevant card).
  • Use state: disabled to reflect data-guarded conditions where the card should be visible but non-interactive until ready.

Paired Do & Don’t

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

...

Protocol of implemented accessibility measures

  • 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.