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

Compare with Current View Page History

Version 1 Next »

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

Card Content

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

[NO DATA AVAILABLE]

Accessibility

[NO DATA AVAILABLE]

  • No labels