{
  "name": "Card",
  "type": "component",
  "description": "A surface that groups related content, composed from shadcn/ui Base UI parts: Card > CardHeader > CardTitle | CardDescription | CardAction, then CardContent and CardFooter.",
  "export": "Card",
  "path": "@gtmi/strix-react/atoms/card",
  "figma": null,
  "figmaAbsent": "shadcn composition pattern. Figma draws no generic card; `Scenario-card` is its own molecule.",
  "props": [
    {
      "name": "variant",
      "type": "'default' | 'elevated' | 'filled'",
      "default": "default",
      "description": "Surface treatment. elevated adds shadow-demo-card, the diffuse blue lift from cr-web-demo; filled recesses the card on the soft neutral surface."
    },
    {
      "name": "padding",
      "type": "'none' | 'sm' | 'md' | 'lg'",
      "default": "md",
      "description": "Root padding, from the gap spacing scale."
    }
  ],
  "ai_tags": ["card", "container", "layout"],
  "since": "0.2.0",
  "tokens_used": [
    "--color-surface-base",
    "--color-surface-neutral-soft",
    "--color-border-neutral-soft",
    "--color-text-primary",
    "--color-text-secondary",
    "--shadow-md",
    "--text-size-subhead-small",
    "--text-size-body-small",
    "--spacing-gap-*"
  ],
  "notes": "COMPOSED, NOT CONFIGURED. This replaced heading, description and actions props, each of which rendered a fixed element in a fixed order with fixed spacing. A caller who needed a badge beside the title, an h2 for document-outline reasons, or a left-aligned footer had to abandon the component. The heading level was the correctness problem: the prop hardcoded h3, which is right only when the card sits under an h2, and gave no way to say otherwise.\n\nvariant and padding are KEPT: they are style props rather than composition, and no arrangement of children expresses \"elevated\".\n\nPADDING LIVES ON THE ROOT, a deliberate divergence from shadcn, which distributes px-6 across CardHeader/CardContent/CardFooter and puts py-6 on the root. Doing it shadcn way would change the rendered geometry of every existing card, and structural conformance is the goal while a visual diff is not. The parts are therefore padding-free and inherit the root padding.",
  "parts": [
    {
      "name": "Card",
      "description": "The surface. Renders children unchanged."
    },
    {
      "name": "CardHeader",
      "description": "A grid, not a flex row: CardAction occupies a second column spanning both rows so a two-line title cannot push it out of alignment. The column exists only when an action is present."
    },
    {
      "name": "CardTitle",
      "description": "Takes as (h1-h6 | div). No trustworthy default heading level exists — h3 is correct only under an h2 — and as=\"div\" is for a title that is not part of the document outline."
    },
    {
      "name": "CardDescription",
      "description": "Supporting copy under the title."
    },
    {
      "name": "CardAction",
      "description": "An action in the header second column. col-start-2 row-span-2 self-start."
    },
    {
      "name": "CardContent",
      "description": "The body."
    },
    {
      "name": "CardFooter",
      "description": "The action row. justify-end by default because that is what the removed actions prop rendered, but it is a class so justify-start overrides it."
    }
  ]
}