@darksnow-ui/card v1.0.0

@darksnow-ui/card

A flexible card container component with header, content, and footer sections.

Installation

npm install @darksnow-ui/card
# or
yarn add @darksnow-ui/card
# or
pnpm add @darksnow-ui/card

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@darksnow-ui/card"

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content. You can put any content here.</p>
      </CardContent>
      <CardFooter>
        <p className="text-sm text-theme-content-muted">Card footer</p>
      </CardFooter>
    </Card>
  )
}

Components

Card

The main container component.

CardHeader

Contains the card title and description.

CardTitle

The main title of the card.

CardDescription

Subtitle or description text.

CardContent

The main content area of the card.

CardFooter

Footer section for actions or additional info.

Examples

Basic Card

<Card className="w-full max-w-md">
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your content here.</p>
  </CardContent>
  <CardFooter>
    <p className="text-sm text-theme-content-muted">Last updated 2 hours ago</p>
  </CardFooter>
</Card>

Interactive Card with Actions

import { Button } from "@darksnow-ui/button"

<Card>
  <CardHeader>
    <CardTitle>Project Alpha</CardTitle>
    <CardDescription>Deploy your new project in one-click.</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="grid gap-2">
      <div className="flex items-center justify-between text-sm">
        <span className="text-theme-content-muted">Progress</span>
        <span>72%</span>
      </div>
      <div className="w-full bg-theme-mark-light rounded-full h-2">
        <div
          className="bg-theme-accent h-2 rounded-full"
          style={{ width: "72%" }}
        ></div>
      </div>
    </div>
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="outline" size="sm">Cancel</Button>
    <Button size="sm">Deploy</Button>
  </CardFooter>
</Card>

Stats Card

<Card>
  <CardHeader>
    <CardTitle>Total Revenue</CardTitle>
    <CardDescription>Monthly revenue growth</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="text-2xl font-bold">$45,231.89</div>
    <p className="text-xs text-theme-highlight mt-1">
      +20.1% from last month
    </p>
  </CardContent>
</Card>

Team Members Card

import { Badge } from "@darksnow-ui/badge"

<Card>
  <CardHeader>
    <CardTitle>Team Members</CardTitle>
  </CardHeader>
  <CardContent>
    <div className="space-y-4">
      <div className="flex items-center space-x-4">
        <div className="w-10 h-10 rounded-full bg-theme-accent flex items-center justify-center">
          JD
        </div>
        <div className="flex-1">
          <p className="text-sm font-medium">John Doe</p>
          <p className="text-xs text-theme-content-muted">john@example.com</p>
        </div>
        <Badge variant="outline">Admin</Badge>
      </div>
    </div>
  </CardContent>
  <CardFooter>
    <Button variant="outline" className="w-full">View all</Button>
  </CardFooter>
</Card>

Create/Empty State Card

<Card className="border-dashed">
  <CardContent className="flex flex-col items-center justify-center py-10">
    <svg
      className="h-10 w-10 text-theme-content-muted mb-4"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M12 4v16m8-8H4"
      />
    </svg>
    <CardTitle className="mb-2">Create new project</CardTitle>
    <CardDescription className="text-center">
      Deploy your new project in one-click.
    </CardDescription>
    <Button className="mt-4">Create Project</Button>
  </CardContent>
</Card>

Hover Effects

<Card className="hover:shadow-lg transition-shadow cursor-pointer">
  <CardHeader>
    <CardTitle>Clickable Card</CardTitle>
    <CardDescription>This card has hover effects</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Hover over me to see the shadow effect.</p>
  </CardContent>
</Card>

Grid Layout

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
  <Card>
    <CardHeader>
      <CardTitle>Card 1</CardTitle>
    </CardHeader>
    <CardContent>Content 1</CardContent>
  </Card>
  
  <Card>
    <CardHeader>
      <CardTitle>Card 2</CardTitle>
    </CardHeader>
    <CardContent>Content 2</CardContent>
  </Card>
  
  <Card>
    <CardHeader>
      <CardTitle>Card 3</CardTitle>
    </CardHeader>
    <CardContent>Content 3</CardContent>
  </Card>
</div>

Styling

The card components use these CSS classes:

• Card: rounded-xl border border-theme-mark-light bg-theme-surface text-theme-content shadow-theme-md
• CardHeader: flex flex-col space-y-1.5 p-6
• CardTitle: font-semibold leading-none tracking-tight
• CardDescription: text-sm text-theme-content-muted
• CardContent: p-6 pt-0
• CardFooter: flex items-center p-6 pt-0

Accessibility

• Semantic HTML structure with proper heading hierarchy
• Supports keyboard navigation when interactive
• Color contrast meets WCAG guidelines
• Screen reader friendly content structure

Theming

The card uses CSS custom properties for theming:

• --theme-surface - Card background
• --theme-mark-light - Border color
• --theme-content - Text color
• --theme-content-muted - Muted text color

License

MIT © DarkSnow UI