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