You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

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

Card Content Overview

Specs

Tokens

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.

Structure

(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

Styling

(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

Tests

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

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

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

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