Versions Compared

Old Version 3

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

Saved on

compared with

New Version 4

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 Content

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

Overview

  • The Card Content Component is a specialized container inside a Dynamic Card.
  • It serves as the main area for arranging and displaying card content.
  • It can hold and organize different UI elements such as text, images, buttons, or charts.
  • It provides a structured way to present related information within a compact card format.

...

  • 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

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

...