Card

Compound card component with Header, Title, Description, Content, and Footer sub-components.

Overview

The Card component from packages/ui is a compound component that provides a structured container for content. It consists of several sub-components that can be composed together.

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@saas/ui";

Basic Usage

<Card>
  <CardHeader>
    <CardTitle>Plan Details</CardTitle>
    <CardDescription>Manage your subscription settings.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your current plan: Pro</p>
  </CardContent>
  <CardFooter>
    <Button>Upgrade</Button>
  </CardFooter>
</Card>

Sub-Components

Component	HTML Element	Purpose
`Card`	`<div>`	Outer container with border, rounded corners, and shadow
`CardHeader`	`<div>`	Top section with vertical spacing
`CardTitle`	`<h3>`	Bold heading text
`CardDescription`	`<p>`	Muted subtitle text below the title
`CardContent`	`<div>`	Main body content area
`CardFooter`	`<div>`	Bottom section, typically for actions

Composition Patterns

<Card>
  <CardHeader>
    <CardTitle>Statistics</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-3xl font-bold">1,234</p>
    <p className="text-sm text-gray-500">Active users</p>
  </CardContent>
</Card>

Card with only content

<Card>
  <CardContent className="pt-6">
    <p>Simple content card without header or footer.</p>
  </CardContent>
</Card>

Note: Add pt-6 to CardContent when there is no CardHeader, since the header normally provides the top padding.

Card in a grid

<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
  {items.map((item) => (
    <Card key={item.id}>
      <CardHeader>
        <CardTitle>{item.title}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>{item.description}</p>
      </CardContent>
    </Card>
  ))}
</div>

Styling

All sub-components accept a className prop for customization:

<Card className="border-indigo-200 bg-indigo-50">
  <CardHeader>
    <CardTitle className="text-indigo-900">Highlighted Card</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-indigo-700">This card stands out.</p>
  </CardContent>
</Card>

Default Styles

Component	Key classes
`Card`	`rounded-lg border bg-white shadow-sm`
`CardHeader`	`flex flex-col space-y-1.5 p-6`
`CardTitle`	`text-lg font-semibold`
`CardDescription`	`text-sm text-gray-500`
`CardContent`	`p-6 pt-0`
`CardFooter`	`flex items-center p-6 pt-0`

Tips

Use CardFooter for action buttons; align them with justify-end or justify-between.
Cards work well inside CSS grid layouts for dashboards and feature sections.
For clickable cards, wrap the entire Card in a link or add cursor-pointer hover:shadow-md to the Card className.

Done reading? Mark this page as complete.