Design System Builder

Card

Card is a compound component that provides card functionality.

Active

Create project

Deploy your new project in one-click.

Installation

npm install @your-design-system/card
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"

export function CardDemo() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here.</p>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}

API Reference

PropTypeDefaultDescription
children*string-

The content to display inside the component.

titlestring-

The title prop for the component.

descriptionstring-

The description prop for the component.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

rounded-lgbordershadow-sm

variant Variants

default

bg-cardtext-card-foregroundborder

Design System Compliance

This component is validated against atomic design principles and foundation token usage.