Card
A rounded card component with a shadow.
Card
A rounded card component with a shadow.
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:
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 |
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:
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) |
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
Prop | Type | Default | Description |
---|---|---|---|
className | string | undefined | Additional CSS class names |
children | ReactNode | undefined | Content 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
Prop | Type | Default | Description |
---|---|---|---|
className | string | undefined | Additional CSS class names |
children | ReactNode | undefined | Content 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 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>
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.