Versions Compared

Old Version 1

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.

...

  • dataTestId — Sets the testing hook ID for automated testing. For example, setting it to product-card-content allows test scripts to reliably locate this component for automated testing scenarios.
  • 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

[NO DATA AVAILABLE]

Accessibility

...

Usage

  • Group only related UI parts inside the card by adding the necessary children to elements.
  • Prefer tokenized spacing: control row/column gaps via gapClass rather than inserting spacer elements.
  • Expose a stable test hook by setting dataTestId.
  • Use displayName for clear authoring labels in the structure panel; end-user copy is owned by child components.

Sizing & Layout

  • Establish a baseline and allow adaptation: set defaultHeight (e.g., "200px") and enable canGrow; add canShrink only when compression is acceptable.
  • Define reading order by arranging children in elements to match the intended scan path and narrative.

Dos & Don’ts

DoDon’tArticle setting(s)
Use layout: "vertical" for text-first or sequential content; use "horizontal" for brief side-by-side atoms.Force horizontal when it causes truncation or awkward wrapping.layout
Set defaultHeight and allow canGrow when content can expand.Fix height externally and let content overflow.defaultHeight, canGrow
Enable canShrink only when tighter layouts may need compression.Over-compress so controls wrap unpredictably.canShrink
Define consistent spacing with a single gapClass per content area.Mix ad-hoc spacings or inject spacer elements.gapClass
Give the area a clear authoring label.Leave defaults like “Card Content 1”.displayName
Provide a stable dataTestId for automation.Depend on brittle selectors or visible labels for tests.dataTestId

Accessibility

  • Choose layout that supports reading: vertical for sequences; horizontal for brief comparisons.
  • Preserve logical reading and focus order by arranging elements to match the content flow.
  • Avoid color-only meaning in children; convey structure through the order you set in elements.