Card
The Card component is a flexible container for displaying information, media, and actions in a consistent layout.
Usage
Default Card
Default Card
This is a simple card with default props.
<Card title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Title displayed at the top of the card. |
| description | string | - | A short description or summary for the card. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | The color theme of the card. |
| state | "" | "success" | "error" | "warning" | - | Optional state indicator for visual feedback. |
| cardIcon | ReactNode | - | An icon element displayed in the card header. |
| imageUrl | string | - | URL of an image displayed in the card. |
| imageAlt | string | - | Alternative text for the card image. |
| imageHeight | number | - | Explicit height for the image. |
| imageWidth | number | - | Explicit width for the image. |
| imageFill | boolean | - | Use fill layout for the image. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Controls border radius of the card. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Controls the shadow depth of the card. |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Controls the card size. |
| align | "left" | "center" | "right" | "center" | Controls the alignment of text and content. |
| layout | "vertical" | "horizontal" | "vertical" | Controls the card layout orientation. |
| outline | boolean | false | Enables outline style for the card. |
| blur | boolean | false | Applies a blur effect to the card background. |
| loading | boolean | false | Shows a loading skeleton overlay. |
| actionButtons | Array<{ label: string; icon?: ReactNode; theme?: string; state?: string; onClick: () => void }> | - | Defines footer action buttons. |
| useIconButtons | boolean | false | Renders action buttons as icon-only buttons. |
| renderHeader | () => ReactNode | - | Custom render function for header content. |
| renderContent | () => ReactNode | - | Custom render function for main content. |
| renderFooter | () => ReactNode | - | Custom render function for footer content. |
| className | string | - | Additional custom class name for the card container. |
| data-testid | string | "card" | Test ID for testing frameworks. |
| aria-label | string | - | Accessible label for screen readers. |