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

Card Content

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.

Card Content Overview

Token	Description
displayName	Display name in structure panel.
elements	Components rendered inside the card content area.
layout	Arrangement of elements: horizontal or vertical.
gapClass	Spacing between child elements (row/column gaps).
canShrink	Allows component to shrink smaller than default size in flex layouts.
canGrow	Allows component to grow larger than default size in flex layouts.
dataTestId	Testing hook ID for automated testing.

(Configured in Visual Properties)

displayName - Sets the display name of the component shown in the structure panel. For example, "Order Details Content" allows for easy identification of this card content's purpose in the component structure, making it easier for developers to locate and work with this specific content area within a complex application.

(Configured in Visual Properties)

elements — Contains all components to be rendered within the card content area. This array can include text fields, buttons, charts, images, or other UI elements that form the card’s content.

Card Content Structure

(Configured in Visual Properties)

layout — Defines the arrangement of elements within the card content. Options: “horizontal” (side by side) or “vertical” (stacked).
gapClass — Controls spacing between child elements using row and column gap values.
defaultHeight — Base height used in flex layout calculations (e.g., “200px”), providing a starting dimension for responsive behavior.
canShrink — Allows the component to become smaller than its default size within a flex container.
canGrow — Allows the component to expand beyond its default size within a flex container.

Visual Properties tab of the Card Content

(Configured in Testing Hooks)

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

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.

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.

Do	Don’t	Article 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

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.