{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "card",
    "type": "registry:component",
    "title": "Card",
    "description": "Surface that groups related content. Variants are set with data-variant (default, subtle, elevated, flat). Compose with header, body and footer sections.",
    "registryDependencies": [
        "tokens",
        "button"
    ],
    "meta": {
        "category": "Data display",
        "layout": "grid"
    },
    "files": [
        {
            "path": "components/card.html",
            "type": "registry:file",
            "target": "components/card.html",
            "content": "<!-- Card\n     Variants: default, subtle, elevated, flat (data-variant).\n     Add data-interactive for a clickable card that lifts on hover.\n     Compose with .dp-card-header, .dp-card-body and .dp-card-footer. -->\n\n<!-- Card with header, body and footer -->\n<div class=\"dp-card\">\n  <div class=\"dp-card-header\">\n    <h3 class=\"dp-card-title\">Domain coverage</h3>\n    <p class=\"dp-card-description\">Updated monthly across every TLD.</p>\n  </div>\n  <div class=\"dp-card-body\">\n    Track companies and technologies across 99% of all registered domains\n    worldwide. Every record is structured and queryable.\n  </div>\n  <div class=\"dp-card-footer\">\n    <button class=\"dp-btn\" type=\"button\" data-size=\"sm\">View report</button>\n    <button class=\"dp-btn\" type=\"button\" data-variant=\"outline\" data-size=\"sm\">Export</button>\n  </div>\n</div>\n\n<!-- Simple body-only card -->\n<div class=\"dp-card\">\n  <div class=\"dp-card-body\">\n    <h3 class=\"dp-card-title\">400M+ domains</h3>\n    <p class=\"dp-card-description\">The complete web, structured in one place.</p>\n  </div>\n</div>\n\n<!-- Subtle variant -->\n<div class=\"dp-card\" data-variant=\"subtle\">\n  <div class=\"dp-card-body\">\n    <h3 class=\"dp-card-title\">Subtle surface</h3>\n    <p class=\"dp-card-description\">Lower contrast for secondary content.</p>\n  </div>\n</div>\n\n<!-- Interactive (clickable) card -->\n<a class=\"dp-card\" data-interactive href=\"#\"\n   style=\"text-decoration: none; max-width: 22rem;\">\n  <div class=\"dp-card-body\">\n    <h3 class=\"dp-card-title\">Asset management</h3>\n    <p class=\"dp-card-description\">Read more about the use case.</p>\n  </div>\n</a>\n"
        },
        {
            "path": "components/card.css",
            "type": "registry:file",
            "target": "components/card.css",
            "content": "/* Card\n   A surface that groups related content. Variants are set with data-variant.\n   Compose with .dp-card-header, .dp-card-body and .dp-card-footer.\n   All colour, radius and shadow come from tokens.css. */\n\n.dp-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--dp-surface);\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-xl);\n  box-shadow: var(--dp-shadow-md);\n  color: var(--dp-text);\n  overflow: hidden;\n}\n\n/* ---- Variants -------------------------------------------------------- */\n.dp-card[data-variant=\"subtle\"] {\n  background: var(--dp-surface-subtle);\n  box-shadow: var(--dp-shadow-sm);\n}\n\n.dp-card[data-variant=\"elevated\"] {\n  border-color: var(--dp-border-strong);\n  box-shadow: var(--dp-shadow-lg);\n}\n\n.dp-card[data-variant=\"flat\"] {\n  box-shadow: none;\n}\n\n/* Interactive cards lift on hover */\n.dp-card[data-interactive] {\n  cursor: pointer;\n  transition: transform var(--dp-transition), box-shadow var(--dp-transition),\n    border-color var(--dp-transition);\n}\n\n.dp-card[data-interactive]:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--dp-shadow-lg);\n  border-color: var(--dp-border-strong);\n}\n\n.dp-card[data-interactive]:focus-visible {\n  outline: none;\n  box-shadow: var(--dp-shadow-focus);\n}\n\n/* ---- Sections -------------------------------------------------------- */\n.dp-card-header {\n  padding: var(--dp-space-5) var(--dp-space-6);\n  border-bottom: 1px solid var(--dp-border);\n}\n\n.dp-card-body {\n  padding: var(--dp-space-6);\n}\n\n.dp-card-footer {\n  display: flex;\n  align-items: center;\n  gap: var(--dp-space-3);\n  padding: var(--dp-space-4) var(--dp-space-6);\n  border-top: 1px solid var(--dp-border);\n  background: var(--dp-surface-subtle);\n}\n\n/* ---- Content --------------------------------------------------------- */\n.dp-card-title {\n  margin: 0;\n  font-size: var(--dp-text-xl);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-card-description {\n  margin: var(--dp-space-2) 0 0;\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text-muted);\n}\n"
        }
    ]
}