Page History

...

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

Links

• 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

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.

...