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