Card

A rounded card component with a shadow.

Card

A rounded card component with a shadow.

Card Content
Add Content to the Main Card body.
Last updated: April 1, 2025

Overview

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

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

Card

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:

PropTypeDefaultDescription
titlestringundefinedThe card’s title
subtitlestringundefinedAdditional descriptive text for the card
bodybooleanfalseWhen true, adds padding to the card without needing a CardBody
classNamestringundefinedAdditional CSS class names
childrenReactNodeundefinedContent of the card

CardHeader

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:

PropTypeDefaultDescription
titlestringundefinedThe header’s title text
subtitlestringundefinedOptional descriptive text
classNamestringundefinedAdditional CSS class names
childrenReactNodeundefinedCustom header content (used when not using title/subtitle)

CardBody

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

PropTypeDefaultDescription
classNamestringundefinedAdditional CSS class names
childrenReactNodeundefinedContent of the card body

CardFooter

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

PropTypeDefaultDescription
classNamestringundefinedAdditional CSS class names
childrenReactNodeundefinedContent of the card footer

Examples

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

Styling

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.

Accessibility

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.