Card - Prisma — ContextQMD

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@prisma/eclipse"; import { Button } from "@prisma/eclipse";

Usage

Basic Card

tsx

import { Card } from "@prisma/eclipse";

export function MyComponent() {
  return (
    <Card>Card content goes here</Card>
  );
}

Live Example:

<div className="my-4"> <Card>This is a basic card with some content.</Card> </div>

Card with Header and Content

tsx

import { Card, CardHeader, CardTitle, CardContent } from "@prisma/eclipse";

export function CardWithHeader() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
      </CardHeader>
      <CardContent>
        <p>This is the main content of the card.</p>
      </CardContent>
    </Card>
  );
}

Live Example:

<div className="my-4"> <Card> <CardHeader> <CardTitle>Getting Started</CardTitle> </CardHeader> <CardContent>This card demonstrates the header and content sections working together.</CardContent> </Card> </div>

Card with Description

tsx

import { 
  Card, 
  CardHeader, 
  CardTitle, 
  CardDescription, 
  CardContent 
} from "@prisma/eclipse";

export function CardWithDescription() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Prisma ORM</CardTitle>
      </CardHeader>
      <CardContent>Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.</CardContent>
    </Card>
  );
}

Live Example:

<div className="my-4"> <Card> <CardHeader> <CardTitle>Prisma ORM</CardTitle> </CardHeader> <CardContent>Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.</CardContent> </Card> </div>

Card with Footer

tsx

import { 
  Card, 
  CardHeader, 
  CardTitle, 
  CardDescription, 
  CardContent, 
  CardFooter 
} from "@prisma/eclipse";
import { Button } from "@prisma/eclipse";

export function CardWithFooter() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Deploy your project</CardTitle>
      </CardHeader>
      <CardContent>Your project is ready to be deployed to production. Click the button below to get started.</CardContent>
      <CardFooter>
        <Button variant="default-stronger">Deploy</Button>
        <Button variant="default-weaker" className="ml-2">Cancel</Button>
      </CardFooter>
    </Card>
  );
}

Live Example:

<div className="my-4"> <Card> <CardHeader> <CardTitle>Deploy your project</CardTitle> </CardHeader> <CardContent>Your project is ready to be deployed to production. Click the button below to get started.</CardContent> <CardFooter> <Button variant="default-stronger">Deploy</Button> <Button variant="default-weaker" className="ml-2">Cancel</Button> </CardFooter> </Card> </div>

Multiple Cards in Grid

tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@prisma/eclipse";

export function CardGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <Card>
        <CardHeader>
          <CardTitle>Prisma ORM</CardTitle>
        </CardHeader>
        <CardContent>Build with confidence using auto-completion and type safety.</CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Prisma Accelerate</CardTitle>
        </CardHeader>
        <CardContent>Speed up your queries with intelligent caching.</CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Prisma Pulse</CardTitle>
        </CardHeader>
        <CardContent>React to database changes in real-time.</CardContent>
      </Card>
    </div>
  );
}

Live Example:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 my-4"> <Card> <CardHeader> <CardTitle>Prisma ORM</CardTitle> </CardHeader> <CardContent>Build with confidence using auto-completion and type safety.</CardContent> </Card> <Card> <CardHeader> <CardTitle>Prisma Accelerate</CardTitle> </CardHeader> <CardContent>Speed up your queries with intelligent caching.</CardContent> </Card> <Card> <CardHeader> <CardTitle>Prisma Pulse</CardTitle> </CardHeader> <CardContent>React to database changes in real-time.</CardContent> </Card> </div>

Custom Styling

tsx

import { Card, CardHeader, CardTitle, CardContent } from "@prisma/eclipse";

export function CustomCard() {
  return (
    <Card className="bg-gradient-to-br from-purple-500/10 to-blue-500/10 border-purple-500/20">
      <CardHeader>
        <CardTitle className="text-purple-600">Custom Styled Card</CardTitle>
      </CardHeader>
      <CardContent>You can customize cards with Tailwind classes.</CardContent>
    </Card>
  );
}

Card Component Props

className - Additional CSS classes (optional)
children - Card content (required)
All standard HTML div attributes are supported

CardHeader Props

className - Additional CSS classes (optional)
children - Header content, typically CardTitle and CardDescription (required)
All standard HTML div attributes are supported

CardTitle Props

className - Additional CSS classes (optional)
children - Title content (required)
All standard HTML div attributes are supported

CardDescription Props

className - Additional CSS classes (optional)
children - Description content (required)
All standard HTML div attributes are supported

CardContent Props

className - Additional CSS classes (optional)
children - Main card content (required)
All standard HTML div attributes are supported

CardFooter Props

className - Additional CSS classes (optional)
children - Footer content, typically buttons or actions (required)
All standard HTML div attributes are supported

Features

✅ Flexible composition with separate header, content, and footer sections
✅ Built-in title and description components
✅ Shadow and border styling from Eclipse design system
✅ Rounded corners for modern look
✅ Fully customizable with className prop
✅ Responsive and works in grid layouts
✅ Semantic HTML structure
✅ Accessible by default

Best Practices

Use CardHeader to group title and description together
Use CardTitle for the main heading of the card
Use CardDescription for supporting text under the title
Use CardContent for the main body of information
Use CardFooter for actions, buttons, or metadata
Keep card content focused on a single topic or entity
Ensure adequate spacing between cards in grid layouts
Use consistent card structure across similar content types
Don't nest cards inside other cards
Maintain visual hierarchy with appropriate text sizing

Common Patterns

Feature Cards

tsx

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  <Card>
    <CardHeader>
      <CardTitle>Fast Performance</CardTitle>
    </CardHeader>
    <CardContent>Optimized queries that run in milliseconds.</CardContent>
  </Card>
</div>

Action Cards

tsx

<Card>
  <CardHeader>
    <CardTitle>Update Available</CardTitle>
  </CardHeader>
  <CardContent>This update includes new features and bug fixes.</CardContent>
  <CardFooter>
    <Button variant="default-stronger">Update Now</Button>
    <Button variant="link">Release Notes</Button>
  </CardFooter>
</Card>

Stats Cards

tsx

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
  <Card>
    <CardHeader>
      <CardTitle className="text-3xl">12,543</CardTitle>
    </CardHeader>
  </Card>
</div>

Content Cards

tsx

<Card>
  <CardHeader>
    <CardTitle>Getting Started with Prisma</CardTitle>
  </CardHeader>
  <CardContent>Learn how to set up Prisma ORM in your Next.js application and start building type-safe database queries.</CardContent>
  <CardFooter>
    <Button variant="link">Read More →</Button>
  </CardFooter>
</Card>

Form Cards

tsx

<Card>
  <CardHeader>
    <CardTitle>Create New Project</CardTitle>
  </CardHeader>
  <CardContent>
    <form>
      <label htmlFor="name">Project Name</label>
      <input type="text" id="name" />
    </form>
  </CardContent>
  <CardFooter>
    <Button type="submit" variant="default-stronger">Create Project</Button>
    <Button type="button" variant="default-weaker">Cancel</Button>
  </CardFooter>
</Card>

Accessibility

Cards use semantic HTML (div elements with proper structure)
Content maintains proper heading hierarchy
Ensure interactive elements within cards are keyboard accessible
Use meaningful titles that describe the card content
Ensure sufficient color contrast for text content
Keep card structure predictable and consistent

Responsive Design

Cards automatically adapt to different screen sizes:

tsx

// Single column on mobile, 2 columns on tablet, 3 on desktop
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</div>

Composition

The Card component is designed for flexible composition. You can use only the parts you need:

tsx

// Minimal card
<Card>
  <CardContent>Simple content</CardContent>
</Card>

// Card with just header and content
<Card>
  <CardHeader>
    <CardTitle>Title Only</CardTitle>
  </CardHeader>
  <CardContent>Content here</CardContent>
</Card>

// Full card with all sections
<Card>
  <CardHeader>
    <CardTitle>Full Card</CardTitle>
  </CardHeader>
  <CardContent>Main content</CardContent>
  <CardFooter>Footer actions</CardFooter>
</Card>

Styling Guidelines

The Card component follows Eclipse design system principles:

Border: Subtle border for definition
Shadow: Soft shadow for elevation
Radius: Rounded corners (xl) for modern feel
Background: Uses card background token
Text: Uses card-foreground text token
Spacing: Consistent padding (p-6) across sections

All sections can be customized with the className prop while maintaining the base styling.