{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "An index card, optionally ruled with a red header line.",
  "categories": [
    "core"
  ],
  "files": [
    {
      "path": "ui/card.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Index-card style: a red rule under the header and blue lines below. */\n  ruled?: boolean;\n}\n\n/** An index card. */\nexport function Card({ ruled = false, className = \"\", ...props }: CardProps) {\n  return (\n    <div\n      data-ruled={ruled || undefined}\n      className={`paper group/card flex flex-col rounded-[3px] border border-(--edge) bg-(--paper-raised) text-(--ink) shadow-[0_1px_1px_rgb(0_0_0/.08),0_8px_18px_-8px_rgb(0_0_0/.28)] ${className}`}\n      {...props}\n    />\n  );\n}\n\nexport function CardHeader({ className = \"\", ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={`flex flex-col gap-1 px-6 pb-4 pt-5 group-data-[ruled]/card:border-b-2 group-data-[ruled]/card:border-(--margin) ${className}`}\n      {...props}\n    />\n  );\n}\n\nexport function CardTitle({ className = \"\", style, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {\n  return (\n    <h3\n      className={`text-[22px] font-semibold leading-tight tracking-tight ${className}`}\n      style={{ fontFamily: \"var(--font-display, Georgia, serif)\", ...style }}\n      {...props}\n    />\n  );\n}\n\nexport function CardDescription({ className = \"\", ...props }: React.HTMLAttributes<HTMLParagraphElement>) {\n  return <p className={`text-[14px] leading-snug text-(--ink-muted) ${className}`} {...props} />;\n}\n\nexport function CardContent({ className = \"\", style, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={`flex-1 px-6 py-4 group-data-[ruled]/card:bg-[repeating-linear-gradient(transparent_0_27px,var(--rule)_27px_28px)] group-data-[ruled]/card:leading-[28px] ${className}`}\n      style={style}\n      {...props}\n    />\n  );\n}\n\nexport function CardFooter({ className = \"\", ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={`flex items-center gap-3 px-6 pb-5 pt-2 ${className}`} {...props} />;\n}\n"
    }
  ]
}