Card

The Card component set provides a flexible container for displaying content in a clear and concise way. It consists of four components: Card (main container), CardHeader (for titles and subtitles), CardBody (for main content), and CardFooter (for actions or metadata). These components are designed to be used together to create beautiful, consistent card layouts throughout your application.

import { Card, CardHeader, CardBody, CardFooter } from "@crafted-ui/react";

Description

The main container component that wraps all card elements. It provides the card’s visual styling including borders, shadows, and rounded corners.

Usage

import { Card, CardBody } from "@crafted-ui/react";

// Basic usage with title and subtitle
<Card title="Card Title" subtitle="Card description">
  <CardBody>
    <p>Card content goes here</p>
  </CardBody>
</Card>

// Using with body flag for simple cards
<Card title="Simple Card" body>
  <p>This card has padding without needing a CardBody component</p>
</Card>

Props

The Card component accepts the following props:

Prop	Type	Default	Description
title	string	undefined	The card’s title
subtitle	string	undefined	Additional descriptive text for the card
body	boolean	false	When true, adds padding to the card without needing a CardBody
className	string	undefined	Additional CSS class names
children	ReactNode	undefined	Content of the card

Description

A component for displaying a title and optional subtitle at the top of a card. Uses Heading5 component for consistent typography.

Usage

import { Card, CardHeader, CardBody } from "@crafted-ui/react";

// Basic usage with Card
<Card>
  <CardHeader title="Card Title" subtitle="Card description" />
  <CardBody>
    <p>Card content goes here</p>
  </CardBody>
</Card>

// Custom header content
<Card>
  <CardHeader>
    <div className="flex justify-between items-center">
      <h3 className="text-lg font-semibold">Custom Header</h3>
      <button className="px-2 py-1 bg-blue-500 text-white rounded-sm">Action</button>
    </div>
  </CardHeader>
  <CardBody>Content goes here</CardBody>
</Card>

Props

The CardHeader component accepts the following props:

Prop	Type	Default	Description
title	string	undefined	The header’s title text
subtitle	string	undefined	Optional descriptive text
className	string	undefined	Additional CSS class names
children	ReactNode	undefined	Custom header content (used when not using title/subtitle)

Description

A container for the main content of a card with appropriate padding.

Usage

import { Card, CardBody } from "@crafted-ui/react";

<Card title="Card Title">
  <CardBody>
    <p>This is the main content area of the card.</p>
    <p>You can place any content here.</p>
  </CardBody>
</Card>

Props

Prop	Type	Default	Description
className	string	undefined	Additional CSS class names
children	ReactNode	undefined	Content of the card body

Description

A component for displaying actions, metadata, or additional information at the bottom of a card.

Usage

import { Card, CardBody, CardFooter } from "@crafted-ui/react";

<Card title="Card Title">
  <CardBody>
    <p>This is the main content area of the card.</p>
  </CardBody>
  <CardFooter>
    <div className="flex justify-between items-center">
      <span className="text-sm text-gray-500">Last updated: April 1, 2025</span>
      <button className="text-sm text-blue-500">Read more</button>
    </div>
  </CardFooter>
</Card>

Props

Prop	Type	Default	Description
className	string	undefined	Additional CSS class names
children	ReactNode	undefined	Content of the card footer

Basic Card

<Card title="Basic Card" subtitle="A simple card with a title and subtitle">
  <CardBody>
    <p>This is a basic card with a title and subtitle.</p>
  </CardBody>
</Card>

Simple Card with Body Flag

<Card title="Simple Card" body>
  <p>This card has padding without needing a CardBody component.</p>
  <p>The body flag adds padding to the card container directly.</p>
</Card>

Card with Custom Header

<Card>
  <CardHeader>
    <div className="flex items-center justify-between">
      <h3 className="text-lg font-semibold">Custom Header</h3>
      <button className="text-sm text-blue-500">Action</button>
    </div>
  </CardHeader>
  <CardBody>
    <p>This card has a custom header with an action button.</p>
  </CardBody>
</Card>

Card with Multiple Content Sections

<Card title="Content Card">
  <CardBody>
    <div className="space-y-4">
      <div className="p-4 bg-gray-100 rounded">
        <h4 className="font-medium">Section 1</h4>
        <p>Content for section one</p>
      </div>
      <div className="p-4 bg-gray-100 rounded">
        <h4 className="font-medium">Section 2</h4>
        <p>Content for section two</p>
      </div>
    </div>
  </CardBody>
</Card>

Card with Footer

<Card title="Card with Footer">
  <CardBody>
    <p>This card includes a footer section for actions or metadata.</p>
  </CardBody>
  <CardFooter>
    <div className="flex justify-between">
      <span className="text-sm text-gray-500">Created: April 1, 2025</span>
      <div className="space-x-2">
        <button className="px-3 py-1 text-sm bg-blue-500 text-white rounded">Save</button>
        <button className="px-3 py-1 text-sm border border-gray-300 rounded">Cancel</button>
      </div>
    </div>
  </CardFooter>
</Card>

Complete Card with All Sections

<Card>
  <CardHeader title="Complete Card" subtitle="Using all card components together" />
  <CardBody>
    <p>This example demonstrates using all card components together to create a complete card layout.</p>
    <ul className="mt-4 space-y-2">
      <li>Card - Main container</li>
      <li>CardHeader - Title and subtitle</li>
      <li>CardBody - Main content</li>
      <li>CardFooter - Actions and metadata</li>
    </ul>
  </CardBody>
  <CardFooter>
    <div className="flex justify-end space-x-2">
      <button className="px-3 py-1 text-sm bg-gray-200 rounded">Cancel</button>
      <button className="px-3 py-1 text-sm bg-blue-500 text-white rounded">Continue</button>
    </div>
  </CardFooter>
</Card>

The Card components use Tailwind CSS for styling. The default styles include:

• Card: Rounded borders, subtle shadow, and border
• CardHeader: Top padding with bottom border
• CardBody: Standard padding with flexible growth
• CardFooter: Standard padding with top border

You can customize the appearance by adding your own className prop to any of the Card components.

The Card component follows best practices for accessibility:

• Use meaningful titles that clearly describe the card’s purpose
• Ensure sufficient color contrast for all text within cards
• When using cards as interactive elements (like links or buttons), ensure they have appropriate keyboard focus states
• Use appropriate heading levels (h1-h6) within cards to maintain proper document hierarchy

Cards are primarily visual containers, so ensure that the content within them is accessible and properly structured.