# Card

The generic surface primitive, composed from typed slots for regions, text, and summary figures, and optionally pressable.

Version: 0.2.0-preview.1 (preview)
Content digest: 70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721
Contract kind: source-derived
Source: packages/design-system/src/components/cards/Card/Card.tsx

## Guidance

{
  "summary": "The generic surface primitive, composed from typed slots for regions, text, and summary figures, and optionally pressable.",
  "guidance": [
    {
      "heading": "Overview",
      "body": "The generic surface primitive. Compose it from typed slots — `Card.Header` / `Card.Body` /\n`Card.Footer`, `Card.Title` / `Card.Description`, `Card.Metric` / `Card.Delta` — rather than raw\nmarkup. `surface` encodes emphasis. For a selectable option, use `SelectionCard`."
    },
    {
      "heading": "Use when",
      "body": "`surface` is the semantic decision: a plain container versus a tinted prompt.\n\nSlots own their own padding, so the root usually keeps `padding=\"none\"`. `layout=\"split\"` lays the\ntop-level slots in a row instead of a column; it is available but not currently used in app code —\n`stack` is the norm."
    },
    {
      "heading": "Composition",
      "body": "Header (title + description) over a body list — the canonical slot arrangement.\n\nThe summary-card pattern pairs `Card.Metric` + `Card.Delta` in a header with a body stat list and a\nfooter link."
    },
    {
      "heading": "Pressable",
      "body": "Pass `onPress` to turn the whole card into a tap target, or `Card.Footer onPress` for a pressable\nfooter only."
    }
  ],
  "usage": [
    {
      "variant": "default",
      "use": "The standard container for grouping content, metrics, and lists. Nearly every card in the app is `default`.",
      "avoid": "A moment you want to actively steer the user toward — that earns `highlight`.",
      "axis": "Surface"
    },
    {
      "variant": "highlight",
      "use": "A tinted surface that steers users toward a short next step — a setup prompt or inline CTA (ProfileSetupCard).",
      "avoid": "Ordinary content. Rare by design — at most one per screen so the highlight keeps its pull.",
      "axis": "Surface"
    }
  ],
  "examples": [],
  "source": "packages/design-system/src/components/cards/Card/Card.mdx",
  "status": "local-preview",
  "note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification."
}

## Contract and public API

```json
{
  "props": [
    {
      "name": "surface",
      "type": "CardSurface | undefined",
      "declared_type": "CardSurface",
      "required": false,
      "description": "Surface fill. Defaults to `default`; `highlight` swaps in the banner container color.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 20
      },
      "values": [
        "default",
        "highlight"
      ],
      "values_complete": true,
      "default": "'default'",
      "default_kind": "source-expression"
    },
    {
      "name": "radius",
      "type": "CardRadius | undefined",
      "declared_type": "CardRadius",
      "required": false,
      "description": "Corner radius for the card surface. Defaults to `lg`.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 22
      },
      "values": [
        "lg",
        "md",
        "sm",
        "xl",
        "xs"
      ],
      "values_complete": true,
      "default": "'lg'",
      "default_kind": "source-expression"
    },
    {
      "name": "layout",
      "type": "CardLayout | undefined",
      "declared_type": "CardLayout",
      "required": false,
      "description": "Direction slots flow. Defaults to `stack`; `split` sits them side by side with an 8px gap.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 24
      },
      "values": [
        "split",
        "stack"
      ],
      "values_complete": true,
      "default": "'stack'",
      "default_kind": "source-expression"
    },
    {
      "name": "padding",
      "type": "CardPadding | undefined",
      "declared_type": "CardPadding",
      "required": false,
      "description": "Padding on the surface itself. Defaults to `none` because the slots pad themselves —\n`default` adds 16px that stacks on top of any padded slot.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 29
      },
      "values": [
        "default",
        "none"
      ],
      "values_complete": true,
      "default": "'none'",
      "default_kind": "source-expression"
    },
    {
      "name": "children",
      "type": "React.ReactNode",
      "declared_type": "React.ReactNode",
      "required": true,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 30
      }
    },
    {
      "name": "className",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 31
      }
    },
    {
      "name": "style",
      "type": "React.CSSProperties | undefined",
      "declared_type": "React.CSSProperties",
      "required": false,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 32
      }
    },
    {
      "name": "onPress",
      "type": "(() => void) | undefined",
      "declared_type": "() => void",
      "required": false,
      "description": "Providing this renders the root as a pressable `<button>` rather than a `<div>`.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 34
      }
    },
    {
      "name": "ariaLabel",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "Accessible label for pressable cards when visible copy is not sufficient.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 36
      }
    },
    {
      "name": "haptic",
      "type": "HapticFeedback | undefined",
      "declared_type": "HapticFeedback",
      "required": false,
      "description": "Haptic feedback for successful presses. Defaults to `true` (`light`).",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 38
      },
      "values": [
        "error",
        "heavy",
        "light",
        "medium",
        "selection",
        "success",
        "warning",
        false,
        true
      ],
      "values_complete": true,
      "default": "true",
      "default_kind": "source-expression"
    },
    {
      "name": "testId",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "`data-testid` on the root element.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 40
      }
    },
    {
      "name": "silhouette",
      "type": "boolean | undefined",
      "declared_type": "boolean",
      "required": false,
      "description": "Marks the card as a silhouette measurement target.\n\nThe attribute is presence-only, so `false` is normalized away rather than rendered:\n`data-silhouette=\"false\"` would still match the `[data-silhouette]` query and opt the card in.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 47
      },
      "values": [
        false,
        true
      ],
      "values_complete": true
    }
  ],
  "prop_shapes": {},
  "api": {
    "method": "typescript-type-checker",
    "typescript_version": "5.9.3",
    "public_export": "Card",
    "public_path": "Card",
    "import_path": "@cloakedinc/design-system",
    "root_kind": "component",
    "entrypoints": [
      {
        "name": "Card",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardRoot/CardRoot.tsx",
          "line": 11
        },
        "props_type": "CardProps",
        "props": [
          {
            "name": "surface",
            "type": "CardSurface | undefined",
            "declared_type": "CardSurface",
            "required": false,
            "description": "Surface fill. Defaults to `default`; `highlight` swaps in the banner container color.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 20
            },
            "values": [
              "default",
              "highlight"
            ],
            "values_complete": true,
            "default": "'default'",
            "default_kind": "source-expression"
          },
          {
            "name": "radius",
            "type": "CardRadius | undefined",
            "declared_type": "CardRadius",
            "required": false,
            "description": "Corner radius for the card surface. Defaults to `lg`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 22
            },
            "values": [
              "lg",
              "md",
              "sm",
              "xl",
              "xs"
            ],
            "values_complete": true,
            "default": "'lg'",
            "default_kind": "source-expression"
          },
          {
            "name": "layout",
            "type": "CardLayout | undefined",
            "declared_type": "CardLayout",
            "required": false,
            "description": "Direction slots flow. Defaults to `stack`; `split` sits them side by side with an 8px gap.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 24
            },
            "values": [
              "split",
              "stack"
            ],
            "values_complete": true,
            "default": "'stack'",
            "default_kind": "source-expression"
          },
          {
            "name": "padding",
            "type": "CardPadding | undefined",
            "declared_type": "CardPadding",
            "required": false,
            "description": "Padding on the surface itself. Defaults to `none` because the slots pad themselves —\n`default` adds 16px that stacks on top of any padded slot.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 29
            },
            "values": [
              "default",
              "none"
            ],
            "values_complete": true,
            "default": "'none'",
            "default_kind": "source-expression"
          },
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 30
            }
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 31
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 32
            }
          },
          {
            "name": "onPress",
            "type": "(() => void) | undefined",
            "declared_type": "() => void",
            "required": false,
            "description": "Providing this renders the root as a pressable `<button>` rather than a `<div>`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 34
            }
          },
          {
            "name": "ariaLabel",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Accessible label for pressable cards when visible copy is not sufficient.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 36
            }
          },
          {
            "name": "haptic",
            "type": "HapticFeedback | undefined",
            "declared_type": "HapticFeedback",
            "required": false,
            "description": "Haptic feedback for successful presses. Defaults to `true` (`light`).",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 38
            },
            "values": [
              "error",
              "heavy",
              "light",
              "medium",
              "selection",
              "success",
              "warning",
              false,
              true
            ],
            "values_complete": true,
            "default": "true",
            "default_kind": "source-expression"
          },
          {
            "name": "testId",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "`data-testid` on the root element.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 40
            }
          },
          {
            "name": "silhouette",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Marks the card as a silhouette measurement target.\n\nThe attribute is presence-only, so `false` is normalized away rather than rendered:\n`data-silhouette=\"false\"` would still match the `[data-silhouette]` query and opt the card in.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 47
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Header",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardSlots/CardSlots.tsx",
          "line": 12
        },
        "props_type": "CardZoneProps",
        "props": [
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 55
            }
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 56
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 57
            }
          },
          {
            "name": "layout",
            "type": "CardSlotLayout | undefined",
            "declared_type": "CardSlotLayout",
            "required": false,
            "description": "Flow direction inside the slot. Defaults to `stack`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 59
            },
            "values": [
              "row",
              "stack"
            ],
            "values_complete": true
          },
          {
            "name": "padding",
            "type": "CardSlotPadding | undefined",
            "declared_type": "CardSlotPadding",
            "required": false,
            "description": "Defaults to `default` (16px). `compact` and `spacious` change only the vertical padding.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 61
            },
            "values": [
              "compact",
              "default",
              "none",
              "spacious"
            ],
            "values_complete": true
          },
          {
            "name": "gap",
            "type": "CardSlotGap | undefined",
            "declared_type": "CardSlotGap",
            "required": false,
            "description": "Space between the slot's own children. Defaults to `sm` (8px).",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 63
            },
            "values": [
              "lg",
              "md",
              "none",
              "sm",
              "xs"
            ],
            "values_complete": true
          },
          {
            "name": "align",
            "type": "CardAlign | undefined",
            "declared_type": "CardAlign",
            "required": false,
            "description": "Cross-axis alignment. Unset applies no class and leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 65
            },
            "values": [
              "center",
              "end",
              "start",
              "stretch"
            ],
            "values_complete": true
          },
          {
            "name": "justify",
            "type": "CardJustify | undefined",
            "declared_type": "CardJustify",
            "required": false,
            "description": "Main-axis distribution; `between` maps to `space-between`. Unset leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 67
            },
            "values": [
              "between",
              "center",
              "end",
              "start"
            ],
            "values_complete": true
          },
          {
            "name": "divider",
            "type": "\"top\" | \"bottom\" | undefined",
            "declared_type": "'top' | 'bottom'",
            "required": false,
            "description": "Draws a `--cds-divider` rule on that edge of the slot.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 69
            },
            "values": [
              "bottom",
              "top"
            ],
            "values_complete": true
          },
          {
            "name": "grow",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Lets the slot absorb leftover space. `Card.Body` already does this without the prop.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 71
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Body",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardSlots/CardSlots.tsx",
          "line": 47
        },
        "props_type": "CardZoneProps",
        "props": [
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 55
            }
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 56
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 57
            }
          },
          {
            "name": "layout",
            "type": "CardSlotLayout | undefined",
            "declared_type": "CardSlotLayout",
            "required": false,
            "description": "Flow direction inside the slot. Defaults to `stack`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 59
            },
            "values": [
              "row",
              "stack"
            ],
            "values_complete": true
          },
          {
            "name": "padding",
            "type": "CardSlotPadding | undefined",
            "declared_type": "CardSlotPadding",
            "required": false,
            "description": "Defaults to `default` (16px). `compact` and `spacious` change only the vertical padding.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 61
            },
            "values": [
              "compact",
              "default",
              "none",
              "spacious"
            ],
            "values_complete": true
          },
          {
            "name": "gap",
            "type": "CardSlotGap | undefined",
            "declared_type": "CardSlotGap",
            "required": false,
            "description": "Space between the slot's own children. Defaults to `sm` (8px).",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 63
            },
            "values": [
              "lg",
              "md",
              "none",
              "sm",
              "xs"
            ],
            "values_complete": true
          },
          {
            "name": "align",
            "type": "CardAlign | undefined",
            "declared_type": "CardAlign",
            "required": false,
            "description": "Cross-axis alignment. Unset applies no class and leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 65
            },
            "values": [
              "center",
              "end",
              "start",
              "stretch"
            ],
            "values_complete": true
          },
          {
            "name": "justify",
            "type": "CardJustify | undefined",
            "declared_type": "CardJustify",
            "required": false,
            "description": "Main-axis distribution; `between` maps to `space-between`. Unset leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 67
            },
            "values": [
              "between",
              "center",
              "end",
              "start"
            ],
            "values_complete": true
          },
          {
            "name": "divider",
            "type": "\"top\" | \"bottom\" | undefined",
            "declared_type": "'top' | 'bottom'",
            "required": false,
            "description": "Draws a `--cds-divider` rule on that edge of the slot.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 69
            },
            "values": [
              "bottom",
              "top"
            ],
            "values_complete": true
          },
          {
            "name": "grow",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Lets the slot absorb leftover space. `Card.Body` already does this without the prop.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 71
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Footer",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardSlots/CardSlots.tsx",
          "line": 82
        },
        "props_type": "CardFooterProps",
        "props": [
          {
            "name": "onPress",
            "type": "(() => void) | undefined",
            "declared_type": "() => void",
            "required": false,
            "description": "Providing this renders the footer as a pressable `<button>` rather than a `<div>`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 87
            }
          },
          {
            "name": "ariaLabel",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Accessible label for the pressable footer when visible copy is not sufficient.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 89
            }
          },
          {
            "name": "haptic",
            "type": "HapticFeedback | undefined",
            "declared_type": "HapticFeedback",
            "required": false,
            "description": "Haptic feedback for successful presses. Defaults to `true` (`light`).",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 91
            },
            "values": [
              "error",
              "heavy",
              "light",
              "medium",
              "selection",
              "success",
              "warning",
              false,
              true
            ],
            "values_complete": true,
            "default": "true",
            "default_kind": "source-expression"
          },
          {
            "name": "testId",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "`data-testid` on the footer element.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 93
            }
          },
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 55
            }
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 56
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 57
            }
          },
          {
            "name": "layout",
            "type": "CardSlotLayout | undefined",
            "declared_type": "CardSlotLayout",
            "required": false,
            "description": "Flow direction inside the slot. Defaults to `stack`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 59
            },
            "values": [
              "row",
              "stack"
            ],
            "values_complete": true
          },
          {
            "name": "padding",
            "type": "CardSlotPadding | undefined",
            "declared_type": "CardSlotPadding",
            "required": false,
            "description": "Defaults to `default` (16px). `compact` and `spacious` change only the vertical padding.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 61
            },
            "values": [
              "compact",
              "default",
              "none",
              "spacious"
            ],
            "values_complete": true
          },
          {
            "name": "gap",
            "type": "CardSlotGap | undefined",
            "declared_type": "CardSlotGap",
            "required": false,
            "description": "Space between the slot's own children. Defaults to `sm` (8px).",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 63
            },
            "values": [
              "lg",
              "md",
              "none",
              "sm",
              "xs"
            ],
            "values_complete": true
          },
          {
            "name": "align",
            "type": "CardAlign | undefined",
            "declared_type": "CardAlign",
            "required": false,
            "description": "Cross-axis alignment. Unset applies no class and leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 65
            },
            "values": [
              "center",
              "end",
              "start",
              "stretch"
            ],
            "values_complete": true,
            "default": "'center'",
            "default_kind": "source-expression"
          },
          {
            "name": "justify",
            "type": "CardJustify | undefined",
            "declared_type": "CardJustify",
            "required": false,
            "description": "Main-axis distribution; `between` maps to `space-between`. Unset leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 67
            },
            "values": [
              "between",
              "center",
              "end",
              "start"
            ],
            "values_complete": true,
            "default": "'center'",
            "default_kind": "source-expression"
          },
          {
            "name": "divider",
            "type": "\"top\" | \"bottom\" | undefined",
            "declared_type": "'top' | 'bottom'",
            "required": false,
            "description": "Draws a `--cds-divider` rule on that edge of the slot.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 69
            },
            "values": [
              "bottom",
              "top"
            ],
            "values_complete": true
          },
          {
            "name": "grow",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Lets the slot absorb leftover space. `Card.Body` already does this without the prop.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 71
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Stack",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardSlots/CardSlots.tsx",
          "line": 132
        },
        "props_type": "CardStackProps",
        "props": [
          {
            "name": "as",
            "type": "\"div\" | \"span\" | undefined",
            "declared_type": "'div' | 'span'",
            "required": false,
            "description": "Element to render. Defaults to `div`; use `span` where only phrasing content is allowed.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 79
            },
            "values": [
              "div",
              "span"
            ],
            "values_complete": true,
            "default": "'div'",
            "default_kind": "source-expression"
          },
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 55
            }
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 56
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 57
            }
          },
          {
            "name": "layout",
            "type": "CardSlotLayout | undefined",
            "declared_type": "CardSlotLayout",
            "required": false,
            "description": "Flow direction inside the slot. Defaults to `stack`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 59
            },
            "values": [
              "row",
              "stack"
            ],
            "values_complete": true
          },
          {
            "name": "padding",
            "type": "CardSlotPadding | undefined",
            "declared_type": "CardSlotPadding",
            "required": false,
            "description": "Defaults to `default` (16px). `compact` and `spacious` change only the vertical padding.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 61
            },
            "values": [
              "compact",
              "default",
              "none",
              "spacious"
            ],
            "values_complete": true
          },
          {
            "name": "gap",
            "type": "CardSlotGap | undefined",
            "declared_type": "CardSlotGap",
            "required": false,
            "description": "Space between the slot's own children. Defaults to `sm` (8px).",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 63
            },
            "values": [
              "lg",
              "md",
              "none",
              "sm",
              "xs"
            ],
            "values_complete": true
          },
          {
            "name": "align",
            "type": "CardAlign | undefined",
            "declared_type": "CardAlign",
            "required": false,
            "description": "Cross-axis alignment. Unset applies no class and leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 65
            },
            "values": [
              "center",
              "end",
              "start",
              "stretch"
            ],
            "values_complete": true
          },
          {
            "name": "justify",
            "type": "CardJustify | undefined",
            "declared_type": "CardJustify",
            "required": false,
            "description": "Main-axis distribution; `between` maps to `space-between`. Unset leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 67
            },
            "values": [
              "between",
              "center",
              "end",
              "start"
            ],
            "values_complete": true
          },
          {
            "name": "divider",
            "type": "\"top\" | \"bottom\" | undefined",
            "declared_type": "'top' | 'bottom'",
            "required": false,
            "description": "Draws a `--cds-divider` rule on that edge of the slot.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 69
            },
            "values": [
              "bottom",
              "top"
            ],
            "values_complete": true
          },
          {
            "name": "grow",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Lets the slot absorb leftover space. `Card.Body` already does this without the prop.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 71
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Title",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardTextSlots/CardTextSlots.tsx",
          "line": 10
        },
        "props_type": "CardTextSlotProps",
        "props": [
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 101
            }
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Description",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardTextSlots/CardTextSlots.tsx",
          "line": 21
        },
        "props_type": "CardTextSlotProps",
        "props": [
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 101
            }
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Metric",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardMetric/CardMetric.tsx",
          "line": 11
        },
        "props_type": "CardMetricProps",
        "props": [
          {
            "name": "value",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "The figure, rendered at `display-2` in the card's text color.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 109
            }
          },
          {
            "name": "unit",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": false,
            "description": "Suffix beside the value, at body size and bottom-aligned. Nothing renders when omitted.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 111
            }
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Delta",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardDelta/CardDelta.tsx",
          "line": 20
        },
        "props_type": "CardDeltaProps",
        "props": [
          {
            "name": "value",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "Change text, rendered as-is — include any sign or unit you want shown.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 130
            }
          },
          {
            "name": "direction",
            "type": "\"up\" | \"down\" | undefined",
            "declared_type": "'up' | 'down'",
            "required": false,
            "description": "Which way the figure moved. Sets the marker, and the tone unless `tone` overrides it.\nDefaults to `up` and is never inferred from `value`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 135
            },
            "values": [
              "down",
              "up"
            ],
            "values_complete": true,
            "default": "'up'",
            "default_kind": "source-expression"
          },
          {
            "name": "tone",
            "type": "CardDeltaTone | undefined",
            "declared_type": "CardDeltaTone",
            "required": false,
            "description": "Overrides the tone `direction` implies, for a figure whose sentiment runs against its arrow —\nspam calls falling is `down` and `success`. Without it, `up` is success and `down` is danger.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 140
            },
            "values": [
              "danger",
              "neutral",
              "success",
              "warning"
            ],
            "values_complete": true
          },
          {
            "name": "marker",
            "type": "CardDeltaMarker | undefined",
            "declared_type": "CardDeltaMarker",
            "required": false,
            "description": "Marker shape. Defaults to `caret`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 142
            },
            "values": [
              "caret",
              "trend"
            ],
            "values_complete": true,
            "default": "'caret'",
            "default_kind": "source-expression"
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 143
            }
          },
          {
            "name": "ariaLabel",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Accessible name for the pill, replacing its visible text. Pass the unabbreviated figure when\n`value` is compacted, so `1.8k this week` is not what a screen reader has to interpret.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 148
            }
          },
          {
            "name": "testId",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "`data-testid` on the pill wrapper; the caret and the text carry none.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 150
            }
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.StatusIndicator",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx",
          "line": 25
        },
        "props_type": "StatusIndicatorProps",
        "props": [
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx",
              "line": 13
            }
          },
          {
            "name": "tone",
            "type": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\" | undefined",
            "declared_type": "StatusTone",
            "required": false,
            "description": "Semantic status color for the dot; maps to the `--cds-status-*` tokens. Defaults to `neutral`.",
            "source": {
              "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx",
              "line": 15
            },
            "values": [
              "danger",
              "info",
              "neutral",
              "success",
              "warning"
            ],
            "values_complete": true,
            "default": "'neutral'",
            "default_kind": "source-expression"
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx",
              "line": 16
            }
          },
          {
            "name": "testId",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Optional test selector.",
            "source": {
              "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx",
              "line": 18
            }
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      }
    ],
    "type_sources": [
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 4,
        "name": "CardSurface",
        "code": "export type CardSurface = 'default' | 'highlight';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 5,
        "name": "CardRadius",
        "code": "export type CardRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 6,
        "name": "CardLayout",
        "code": "export type CardLayout = 'stack' | 'split';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 7,
        "name": "CardPadding",
        "code": "export type CardPadding = 'none' | 'default';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 8,
        "name": "CardSlotLayout",
        "code": "export type CardSlotLayout = 'stack' | 'row';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 9,
        "name": "CardSlotPadding",
        "code": "export type CardSlotPadding = 'none' | 'default' | 'compact' | 'spacious';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 10,
        "name": "CardSlotGap",
        "code": "export type CardSlotGap = 'none' | 'xs' | 'sm' | 'md' | 'lg';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 11,
        "name": "CardAlign",
        "code": "export type CardAlign = 'start' | 'center' | 'end' | 'stretch';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 12,
        "name": "CardJustify",
        "code": "export type CardJustify = 'start' | 'center' | 'between' | 'end';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 18,
        "name": "CardProps",
        "code": "export interface CardProps {\n    /** Surface fill. Defaults to `default`; `highlight` swaps in the banner container color. */\n    surface?: CardSurface;\n    /** Corner radius for the card surface. Defaults to `lg`. */\n    radius?: CardRadius;\n    /** Direction slots flow. Defaults to `stack`; `split` sits them side by side with an 8px gap. */\n    layout?: CardLayout;\n    /**\n     * Padding on the surface itself. Defaults to `none` because the slots pad themselves —\n     * `default` adds 16px that stacks on top of any padded slot.\n     */\n    padding?: CardPadding;\n    children: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    /** Providing this renders the root as a pressable `<button>` rather than a `<div>`. */\n    onPress?: () => void;\n    /** Accessible label for pressable cards when visible copy is not sufficient. */\n    ariaLabel?: string;\n    /** Haptic feedback for successful presses. Defaults to `true` (`light`). */\n    haptic?: HapticFeedback;\n    /** `data-testid` on the root element. */\n    testId?: string;\n    /**\n     * Marks the card as a silhouette measurement target.\n     *\n     * The attribute is presence-only, so `false` is normalized away rather than rendered:\n     * `data-silhouette=\"false\"` would still match the `[data-silhouette]` query and opt the card in.\n     */\n    silhouette?: boolean;\n}"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 54,
        "name": "CardZoneProps",
        "code": "export interface CardZoneProps {\n    children: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    /** Flow direction inside the slot. Defaults to `stack`. */\n    layout?: CardSlotLayout;\n    /** Defaults to `default` (16px). `compact` and `spacious` change only the vertical padding. */\n    padding?: CardSlotPadding;\n    /** Space between the slot's own children. Defaults to `sm` (8px). */\n    gap?: CardSlotGap;\n    /** Cross-axis alignment. Unset applies no class and leaves the flex default. */\n    align?: CardAlign;\n    /** Main-axis distribution; `between` maps to `space-between`. Unset leaves the flex default. */\n    justify?: CardJustify;\n    /** Draws a `--cds-divider` rule on that edge of the slot. */\n    divider?: 'top' | 'bottom';\n    /** Lets the slot absorb leftover space. `Card.Body` already does this without the prop. */\n    grow?: boolean;\n}"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 77,
        "name": "CardStackProps",
        "code": "export interface CardStackProps extends CardZoneProps {\n    /** Element to render. Defaults to `div`; use `span` where only phrasing content is allowed. */\n    as?: 'div' | 'span';\n}"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 85,
        "name": "CardFooterProps",
        "code": "export interface CardFooterProps extends CardZoneProps {\n    /** Providing this renders the footer as a pressable `<button>` rather than a `<div>`. */\n    onPress?: () => void;\n    /** Accessible label for the pressable footer when visible copy is not sufficient. */\n    ariaLabel?: string;\n    /** Haptic feedback for successful presses. Defaults to `true` (`light`). */\n    haptic?: HapticFeedback;\n    /** `data-testid` on the footer element. */\n    testId?: string;\n}"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 100,
        "name": "CardTextSlotProps",
        "code": "export interface CardTextSlotProps {\n    children: React.ReactNode;\n}"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 107,
        "name": "CardMetricProps",
        "code": "export interface CardMetricProps {\n    /** The figure, rendered at `display-2` in the card's text color. */\n    value: React.ReactNode;\n    /** Suffix beside the value, at body size and bottom-aligned. Nothing renders when omitted. */\n    unit?: React.ReactNode;\n}"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 117,
        "name": "CardDeltaTone",
        "code": "export type CardDeltaTone = 'success' | 'warning' | 'danger' | 'neutral';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 123,
        "name": "CardDeltaMarker",
        "code": "export type CardDeltaMarker = 'caret' | 'trend';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 128,
        "name": "CardDeltaProps",
        "code": "export interface CardDeltaProps {\n    /** Change text, rendered as-is — include any sign or unit you want shown. */\n    value: React.ReactNode;\n    /**\n     * Which way the figure moved. Sets the marker, and the tone unless `tone` overrides it.\n     * Defaults to `up` and is never inferred from `value`.\n     */\n    direction?: 'up' | 'down';\n    /**\n     * Overrides the tone `direction` implies, for a figure whose sentiment runs against its arrow —\n     * spam calls falling is `down` and `success`. Without it, `up` is success and `down` is danger.\n     */\n    tone?: CardDeltaTone;\n    /** Marker shape. Defaults to `caret`. */\n    marker?: CardDeltaMarker;\n    className?: string;\n    /**\n     * Accessible name for the pill, replacing its visible text. Pass the unabbreviated figure when\n     * `value` is compacted, so `1.8k this week` is not what a screen reader has to interpret.\n     */\n    ariaLabel?: string;\n    /** `data-testid` on the pill wrapper; the caret and the text carry none. */\n    testId?: string;\n}"
      },
      {
        "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx",
        "line": 12,
        "name": "StatusIndicatorProps",
        "code": "export interface StatusIndicatorProps {\n    children: React.ReactNode;\n    /** Semantic status color for the dot; maps to the `--cds-status-*` tokens. Defaults to `neutral`. */\n    tone?: StatusTone;\n    className?: string;\n    /** Optional test selector. */\n    testId?: string;\n}"
      },
      {
        "path": "packages/design-system/src/styles/statusTone.ts",
        "line": 7,
        "name": "STATUS_TONES",
        "code": "STATUS_TONES = ['neutral', 'info', 'success', 'warning', 'danger'] as const"
      },
      {
        "path": "packages/design-system/src/styles/statusTone.ts",
        "line": 9,
        "name": "StatusTone",
        "code": "export type StatusTone = (typeof STATUS_TONES)[number];"
      },
      {
        "path": "packages/design-system/src/tokens/CdsHaptic.ts",
        "line": 6,
        "name": "HapticFeedback",
        "code": "export type HapticFeedback = boolean | HapticType;"
      },
      {
        "path": "packages/design-system/src/tokens/HapticType.ts",
        "line": 2,
        "name": "HapticType",
        "code": "export type HapticType = 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error' | 'selection';"
      }
    ],
    "defaults_policy": "Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source."
  },
  "spec": {
    "$schema": "../../../specs/component-spec.schema.json",
    "identity": {
      "name": "Card",
      "status": "preview",
      "version": "1.0.0",
      "summary": "The generic surface primitive, composed from typed slots for regions, text, and summary figures, and optionally pressable."
    },
    "parts": [
      {
        "id": "root",
        "label": "Root",
        "description": "Surface shell carrying the surface, radius, layout, and padding.",
        "required": true
      },
      {
        "id": "header",
        "label": "Card.Header",
        "description": "Top region slot, usually title and status."
      },
      {
        "id": "body",
        "label": "Card.Body",
        "description": "Main region slot for content and lists."
      },
      {
        "id": "footer",
        "label": "Card.Footer",
        "description": "Bottom region slot, optionally pressable."
      },
      {
        "id": "stack",
        "label": "Card.Stack",
        "description": "Ad-hoc grouping slot within a region."
      },
      {
        "id": "title",
        "label": "Card.Title",
        "description": "Region heading; wraps to as many lines as the copy needs."
      },
      {
        "id": "description",
        "label": "Card.Description",
        "description": "Supporting region text."
      },
      {
        "id": "metric",
        "label": "Card.Metric",
        "description": "Large metric value with optional unit."
      },
      {
        "id": "delta",
        "label": "Card.Delta",
        "description": "Change label: a caret or trend marker with the movement, toned success, warning, danger, or neutral. Tone follows the direction unless the figure's sentiment runs against its arrow."
      }
    ],
    "allowedDesignChoices": {
      "variants": {
        "container": {
          "label": "Container",
          "description": "The single generic surface; content comes from slots."
        }
      },
      "sizes": {},
      "surfaces": {
        "default": {
          "label": "Default",
          "description": "Raised surface background."
        },
        "highlight": {
          "label": "Highlight",
          "description": "Tinted background for prompts and CTAs."
        }
      },
      "radii": {
        "xs": {
          "label": "Extra small"
        },
        "sm": {
          "label": "Small"
        },
        "md": {
          "label": "Medium"
        },
        "lg": {
          "label": "Large",
          "description": "The default corner radius."
        },
        "xl": {
          "label": "Extra large"
        }
      },
      "paddings": {
        "none": {
          "label": "None",
          "description": "No outer padding; slots own their padding."
        },
        "default": {
          "label": "Default",
          "description": "16-unit outer padding on the shell."
        }
      },
      "layouts": {
        "stack": {
          "label": "Stack",
          "description": "Top-level slots flow in a column."
        },
        "split": {
          "label": "Split",
          "description": "Top-level slots flow in a row."
        }
      }
    },
    "variants": [
      {
        "id": "container",
        "label": "Container",
        "description": "Generic slotted surface.",
        "platforms": [
          "ios",
          "android",
          "web"
        ]
      }
    ],
    "sizes": [],
    "measurements": [
      {
        "id": "surface-radius",
        "label": "Default corner radius",
        "kind": "exact",
        "token": "--cds-radius-lg",
        "value": 20,
        "unit": "px",
        "appliesTo": [
          "root"
        ]
      },
      {
        "id": "split-gap",
        "label": "Split layout gap",
        "kind": "exact",
        "token": "--cds-space-8",
        "value": 8,
        "unit": "px",
        "appliesTo": [
          "root"
        ]
      },
      {
        "id": "default-padding",
        "label": "Default outer padding",
        "kind": "exact",
        "token": "--cds-space-16",
        "value": 16,
        "unit": "px",
        "appliesTo": [
          "root"
        ]
      }
    ],
    "layout": {
      "alignment": "Slots stack in a column by default, or lay out in a row under the split layout.",
      "flow": "The shell hosts typed slots; slots own their own padding, so the shell usually keeps padding none.",
      "notes": [
        "Use SelectionCard when the card is a selectable option rather than a container."
      ]
    },
    "typographyAndColor": {
      "typography": [
        {
          "label": "Title",
          "description": "Card.Title uses the body ramp emphasis.",
          "token": "--cds-type-body-size"
        }
      ],
      "colors": [
        {
          "label": "Default surface",
          "description": "The default surface uses the raised background.",
          "token": "--cds-bg-surface"
        },
        {
          "label": "Highlight surface",
          "description": "The highlight surface uses the banner container tint.",
          "token": "--cds-banner-container"
        },
        {
          "label": "Text",
          "description": "Card content uses primary text.",
          "token": "--cds-text-primary"
        },
        {
          "label": "Delta label",
          "description": "Card.Delta's marker and label mix 60% of the tone's solid colour with 40% primary text for readable contrast on the unchanged subtle fill. Success is shown; danger, warning and neutral follow the same calculation. This local adaptation remains preview pending human sign-off.",
          "token": "--cds-status-success-solid"
        },
        {
          "label": "Delta fill",
          "description": "The delta pill sits on the matching subtle tint for its tone.",
          "token": "--cds-status-success-subtle"
        }
      ]
    },
    "states": [
      {
        "id": "default",
        "label": "Default",
        "description": "Static container surface."
      },
      {
        "id": "highlight",
        "label": "Highlight",
        "description": "Tinted prompt surface."
      },
      {
        "id": "pressable",
        "label": "Pressable",
        "description": "onPress makes the whole card a tap target with tap feedback."
      }
    ],
    "behavior": [
      {
        "label": "Slot composition",
        "description": "Compose regions and figures from typed slots rather than raw markup."
      },
      {
        "label": "Pressable",
        "description": "onPress makes the card a button; a pressable footer targets just the footer. The two are mutually exclusive — a pressable footer inside a pressable card would nest interactive controls."
      },
      {
        "label": "Silhouette measurement",
        "description": "silhouette marks the card as a measurement target so a page can record its settled geometry for a loading placeholder. Presence-only and non-visual: it renders a data attribute and changes nothing about the card itself."
      }
    ],
    "accessibility": [
      {
        "label": "Pressable name",
        "description": "Give a pressable card an accessible label when visible copy is insufficient."
      },
      {
        "label": "Structure",
        "description": "Slots keep a predictable region order for assistive tech."
      }
    ],
    "contentAdaptation": [
      {
        "label": "Region padding",
        "description": "Slots carry their own padding tokens so the shell stays padding-free."
      },
      {
        "label": "Split content",
        "description": "The split layout pairs a metric with supporting content in a row."
      }
    ],
    "motionHaptics": {
      "motion": [
        {
          "label": "Press feedback",
          "description": "Pressable cards apply tap feedback on press."
        }
      ],
      "haptics": [
        {
          "label": "Press haptic",
          "description": "Pressable cards request a light haptic on a successful press."
        }
      ]
    },
    "platformDifferences": []
  },
  "platforms": {
    "implemented": [
      "web"
    ],
    "native": "Imported design guidance only; no native implementation or parity verification in this preview.",
    "react": {
      "implementation": "local",
      "status": "preview",
      "parity": "web-reference"
    },
    "vue": {
      "implementation": "absent",
      "parity": "not-verified",
      "status": "reference-only"
    },
    "swift": {
      "implementation": "absent",
      "parity": "not-verified",
      "status": "reference-only"
    },
    "kotlin": {
      "implementation": "absent",
      "parity": "not-verified",
      "status": "reference-only"
    }
  },
  "tokens": [
    {
      "name": "--cds-radius-lg",
      "light": "20px",
      "dark": "20px"
    },
    {
      "name": "--cds-space-8",
      "light": "8px",
      "dark": "8px"
    },
    {
      "name": "--cds-space-16",
      "light": "16px",
      "dark": "16px"
    },
    {
      "name": "--cds-type-body-size",
      "light": "1rem",
      "dark": "1rem"
    },
    {
      "name": "--cds-bg-surface",
      "light": "#ffffff",
      "dark": "#1b1b18"
    },
    {
      "name": "--cds-banner-container",
      "light": "#f3f1ed",
      "dark": "#141410"
    },
    {
      "name": "--cds-text-primary",
      "light": "#141410",
      "dark": "#f3f1ed"
    },
    {
      "name": "--cds-status-success-solid",
      "light": "#008924",
      "dark": "#008924"
    },
    {
      "name": "--cds-status-success-subtle",
      "light": "#0089241a",
      "dark": "#0089241a"
    }
  ],
  "review": {
    "local_status": "not-reviewed",
    "source_approval": null,
    "imported_spec_status": "approved",
    "spec_origin": "imported-adapted",
    "local_spec_source_status": "preview",
    "imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1",
    "note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract."
  },
  "missing_facts": [
    {
      "code": "human-review-pending",
      "detail": "This local preview has no recorded human design or engineering sign-off."
    },
    {
      "code": "platform-parity-unverified",
      "detail": "Vue, Swift and Kotlin implementations are absent from this package; platform parity has not been verified."
    },
    {
      "code": "figma-mapping-unverified",
      "detail": "No current component-level Figma node and immutable revision have been verified for this contract."
    }
  ]
}
```

## Visual states

- [Playground](/storybook/iframe.html?id=cloaked-design-system-cards-card--playground&viewMode=story) | export: Playground | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

- [Basic](/storybook/iframe.html?id=cloaked-design-system-cards-card--basic&viewMode=story) | export: Basic | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

- [Radii](/storybook/iframe.html?id=cloaked-design-system-cards-card--radii&viewMode=story) | export: Radii | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

- [Highlighted Prompt](/storybook/iframe.html?id=cloaked-design-system-cards-card--highlighted-prompt&viewMode=story) | export: HighlightedPrompt | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

- [Pressable](/storybook/iframe.html?id=cloaked-design-system-cards-card--pressable&viewMode=story) | export: Pressable | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

- [Metric Summary](/storybook/iframe.html?id=cloaked-design-system-cards-card--metric-summary&viewMode=story) | export: MetricSummary | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

- [Sectioned Rows](/storybook/iframe.html?id=cloaked-design-system-cards-card--sectioned-rows&viewMode=story) | export: SectionedRows | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

- [Visualization Content](/storybook/iframe.html?id=cloaked-design-system-cards-card--visualization-content&viewMode=story) | export: VisualizationContent | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

- [Split Layout](/storybook/iframe.html?id=cloaked-design-system-cards-card--split-layout&viewMode=story) | export: SplitLayout | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

- [Metric With Unit](/storybook/iframe.html?id=cloaked-design-system-cards-card--metric-with-unit&viewMode=story) | export: MetricWithUnit | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

- [Pressable Footer](/storybook/iframe.html?id=cloaked-design-system-cards-card--pressable-footer&viewMode=story) | export: PressableFooter | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

- [Dark Theme](/storybook/iframe.html?id=cloaked-design-system-cards-card--dark-theme&viewMode=story) | export: DarkTheme | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

- [Delta Overflow](/storybook/iframe.html?id=cloaked-design-system-cards-card--delta-overflow&viewMode=story) | export: DeltaOverflow | source: packages/design-system/src/components/cards/Card/Card.stories.tsx

Preview pending human sign-off. Source-derived APIs and successful checks do not certify accessibility, native parity or approval.