(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 designed to hold and arrange content within a Dynamic Card Component. It serves as the main content area of a card, providing a flexible space for displaying and organizing various UI elements. This component facilitates the structured presentation of related information or interactive elements within the compact and familiar card interface format.

Properties

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

Visual Properties

• elements - Contains all components to be rendered within the card content area. This array can include any dynamic components like text fields, buttons, charts, images, or other UI elements that form the content of the card. For example, a product card content might include elements such as product image, description, price, and "Add to Cart" button arranged in a logical sequence.

• layout - Defines the layout arrangement of elements within the card content. Options include "horizontal" (elements arranged side by side) or "vertical" (elements stacked on top of each other). For example, using "vertical" layout provides a clean presentation for form fields in a card, while "horizontal" layout might be better for status indicators or action buttons that should appear next to each other.

• paddingClass - Configures spacing around the card content component using CSS classes. For example, "p-4" adds medium padding on all sides of the content area, improving visual spacing and readability of the contained elements. This helps maintain consistent spacing throughout your application.

• gapClass - Controls the spacing between child elements within the card content using row and column gap properties. For example, {"row": "row-gap-2", "column": "column-gap-3"} would create moderate vertical spacing and slightly larger horizontal spacing between elements, creating a balanced visual hierarchy.

• defaultHeight - Sets the base height used in flex layout calculations for the component. For example, setting to "200px" provides a starting height dimension that can grow or shrink based on other flex properties. This helps maintain consistent sizing across card instances.

• canShrink - Determines whether the component can become smaller than its default size in a flex container. This hidden property works in conjunction with flex layout rules to control the component's responsiveness.

• canGrow - Determines whether the component can become larger than its default size in a flex container. This hidden property works with flex layout rules to allow the component to expand when necessary.

Testing Hooks Properties

• dataTestId - Sets the testing hook ID for automated testing. For example, setting to "product-card-content" allows test scripts to reliably locate this component for automated testing scenarios, ensuring consistent quality assurance.