Card Component

ℹ️

The Card component is a versatile React component designed to create customizable cards with different variants, headers, bodies, and actions. This component is inspired by the DaisyUI (opens in a new tab) framework's design for cards.

Example Preview

Card Component Preview

Usage

import { Card } from "@/@core";
 
// Example usage of Card component
const MyCard = () => {
  return (
    <Card
      className="bg-base-100 shadow-xl max-w-sm w-full"
      variant="normal"
      imageOverlay
    >
      {/* Card content goes here */}
    </Card>
  );
};
 
export default MyCard;

Props

`Card` Component Props

Prop Name	Type	Default Value	Allowed Values	Description
`variant`	`string`	`'normal'`	`'compact'`, `'normal'`	Specifies the variant of the card (compact or normal).
`imageOverlay`	`boolean`	`false`	`true`, `false`	Adds an image overlay effect to the card.
`className`	`string`	`undefined`	Any valid class name	Additional class names to customize the appearance of the card.
`props`	`HTMLAttributes`	`undefined`	Any additional HTML attributes	Any additional HTML attributes to be applied to the card component.
`children`	`React.ReactNode`	`undefined`	Any valid React node	The content to be rendered inside the card.

`Card.Header` Component Props

Prop Name	Type	Default Value	Allowed Values	Description
`label`	`string`	`'h3'`	`'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'h6'`	Specifies the heading level for the card header.
`className`	`string`	`undefined`	Any valid class name	Additional class names for the card header.
`props`	`HTMLAttributes`	`undefined`	Any additional HTML attributes	Any additional HTML attributes for the heading element.
`children`	`React.ReactNode`	`undefined`	Any valid React node	The content to be rendered inside the card header.

`Card.Body` Component Props

Prop Name	Type	Default Value	Allowed Values	Description
`className`	`string`	`undefined`	Any valid class name	Additional class names for the card body.
`props`	`HTMLAttributes`	`undefined`	Any additional HTML attributes	Any additional HTML attributes for the body element.
`children`	`React.ReactNode`	`undefined`	Any valid React node	The content to be rendered inside the card body.

`Card.Actions` Component Props

Prop Name	Type	Default Value	Allowed Values	Description
`position`	`string`	`'right'`	`'left'`, `'right'`	Specifies the alignment of the card actions.
`className`	`string`	`undefined`	Any valid class name	Additional class names for the card actions.
`props`	`HTMLAttributes`	`undefined`	Any additional HTML attributes	Any additional HTML attributes for the actions container.
`children`	`React.ReactNode`	`undefined`	Any valid React node	The content to be rendered inside the card actions.

Examples

Example 1: Basic Card

import { Card } from "@/@core";
 
const MyCard = () => {
  return (
    <Card>
      <Card.Header>Card Title</Card.Header>
      <Card.Body>Card Content Goes Here</Card.Body>
      <Card.Actions>{/* Actions go here */}</Card.Actions>
    </Card>
  );
};
 
export default MyCard;

Example 2: Card with Variant

import { Card } from "@/@core";
 
const MyCard = () => {
  return (
    <Card variant="compact">{/* Card content for compact variant */}</Card>
  );
};
 
export default MyCard;

Example 3: Card with Image Overlay

import { Card } from "@/@core";
 
const MyCard = () => {
  return <Card imageOverlay>{/* Card content with image overlay */}</Card>;
};
 
export default MyCard;

ℹ️

Note: The Card component provides a visually appealing loading experience and is inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components.

Button Chat Bubble