{
  "tag": "ed-card",
  "kind": "component",
  "summary": "A framed container that previews one or more items — a project, an article, a KPI — so users can scan it and\nopen it.",
  "status": "experimental",
  "level": "molecule",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/card/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/card/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [],
  "use": [
    "Browsing a collection of heterogeneous items, where users need to evaluate each one quickly — project summaries, article previews",
    "Dashboard overviews where each card summarizes one data domain or KPI at a glance",
    "A live summary beside a form that recalculates while the user types and holds information only, no controls — as in [F05 Live summary](https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/forms/f05-live-summary/)",
    "A decorative surface that lifts an area off the page"
  ],
  "notFor": [
    {
      "when": "Comparing values across multiple records such as status, date, owner, or amount — card grids never spatially align identical fields and force repeated back-and-forth scanning",
      "instead": "a [Data Grid](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/data-grid) or a plain `<table>`, with cards at most as the alternative view beside it"
    },
    {
      "when": "Searching for a specific named item, or seeing which result is ranked first — card grids deprioritize ranking and reduce the number of items visible at once",
      "instead": "a plain list"
    },
    {
      "when": "Content items that are primarily images with no supporting text — card chrome adds nothing",
      "instead": "a plain image grid"
    }
  ],
  "rules": [
    {
      "id": "card/browsing-tool",
      "rule": "Use cards as a browsing tool, not a display format — when users arrive without a specific item in mind and need to scan a collection. When users need to find a specific item, compare values across records, or rank results, use a list or table: it serves them better."
    },
    {
      "id": "card/alternative-view",
      "rule": "Offer cards as an alternative view of the same records beside a [Data Grid](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/data-grid), behind a Table | Cards switch — the exception to the comparison and homogeneity cases under \"Not for\".",
      "why": "The table stays one click away for comparing values."
    },
    {
      "id": "card/short-preview",
      "rule": "Keep card body content to a short, evaluable preview — 2–4 lines maximum. Never overload a card with full-length text that belongs in a detail view, or let its content grow into a full page in miniature; use a detail view instead.",
      "check": "warning"
    },
    {
      "id": "card/relevance-metadata",
      "rule": "Surface the metadata users need to judge relevance without clicking."
    },
    {
      "id": "card/uniform-grid",
      "rule": "Keep all cards in a grid to the same height, width, and internal structure — never let cards in the same grid differ in size or structure without a meaningful reason.",
      "check": "warning"
    },
    {
      "id": "card/single-click-target",
      "rule": "Use interactive mode only when the whole card is a single click target. Never place a button or link inside a card that is also itself an interactive navigation target, and never combine navigation and selection behavior in the same interactive card.",
      "check": "error"
    },
    {
      "id": "card/focus-ring",
      "rule": "Keep the card's built-in focus ring when it is keyboard-focused — never suppress the outline on interactive or selectable cards.",
      "check": "error"
    },
    {
      "id": "card/three-actions",
      "rule": "Never use more than three visible action controls in a single card.",
      "check": "error"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "appearance",
        "property": "appearance",
        "type": "'filled-outlined' | 'filled' | 'outlined' | 'plain'",
        "default": "'outlined'",
        "description": "The card's visual appearance."
      },
      {
        "name": "with-header",
        "property": "withHeader",
        "type": "boolean",
        "default": "false",
        "description": "Only required for SSR. Set to `true` if you're slotting in a `header` element so the server-rendered markup\nincludes the header before the component hydrates on the client."
      },
      {
        "name": "with-footer",
        "property": "withFooter",
        "type": "boolean",
        "default": "false",
        "description": "Only required for SSR. Set to `true` if you're slotting in a `footer` element so the server-rendered markup\nincludes the footer before the component hydrates on the client."
      },
      {
        "name": "interactive",
        "property": "interactive",
        "type": "boolean",
        "default": "false",
        "description": "Turns the card into a button: it gains hover/pressed styling, becomes focusable (`role=\"button\"`,\n`tabindex=\"0\"`) and is activated by pointer or keyboard (Enter or Space), which emits a `click`.\nThe card owns no state — react to `click` to drive navigation, opening a detail view, etc.\n\nDo not combine this with controls in the `header-end` / `footer` slots.\nThe card takes its accessible name from its content, so a slotted button's label becomes part of\nthe card's own name, and the control is then announced twice — once inside the name of the\nbutton that contains it. Measured in Chromium and Firefox; `stopPropagation` addresses only the\nclick bubbling, not this. Keep the card non-interactive when it carries actions."
      },
      {
        "name": "selectable",
        "property": "selectable",
        "type": "boolean",
        "default": "false",
        "description": "Turns the card into a checkbox: it becomes focusable (`role=\"checkbox\"`, `tabindex=\"0\"`) and\ntoggles its own `checked` state on pointer click or Space, emitting a `change` event. Implies\n`interactive` (hover/pressed styling) and takes precedence over it for the ARIA role. The same\n`stopPropagation` caveat for interactive slot content applies."
      },
      {
        "name": "checked",
        "property": "checked",
        "type": "boolean",
        "default": "false",
        "description": "The checked state of a `selectable` card. Reflected to `aria-checked`. No effect without `selectable`."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [],
    "events": [
      {
        "name": "click",
        "react": "onClick",
        "description": "Standard click event. When the card is `interactive`, it is also emitted on keyboard activation (Enter or Space)."
      },
      {
        "name": "change",
        "react": "onChange",
        "description": "Emitted when a `selectable` card toggles its `checked` state, by pointer click or Space."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The card's main content."
      },
      {
        "name": "header",
        "description": "The card's title. Any element works; an `<h3>` gives the card a place in the page outline and looks the same as plain text there, while another heading level keeps its own size."
      },
      {
        "name": "header-start",
        "description": "An optional icon before the title."
      },
      {
        "name": "header-end",
        "description": "An optional badge or action at the end of the header. Shown alongside a title, not instead of one: without `header` (or `with-header`) the card draws no header, and content placed in `header-start` or `header-end` stays hidden."
      },
      {
        "name": "footer",
        "description": "An optional footer for the card, typically a link or an action."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-card-spacing",
        "default": "var(--ed-space-4)",
        "description": "The space between the card's border and its content. Expects a single value."
      }
    ],
    "parts": [
      {
        "name": "header",
        "description": "The container that wraps the card's header."
      },
      {
        "name": "title",
        "description": "The container that wraps the `header` slot. It takes the space `header-start` and `header-end` leave."
      },
      {
        "name": "body",
        "description": "The container that wraps the card's main content. It takes the free space of a card stretched taller than its content, so the footer sits at the bottom edge."
      },
      {
        "name": "footer",
        "description": "The container that wraps the card's footer."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/card/card.js';",
  "react": {
    "component": "EdCard",
    "import": "import EdCard from '@eurodata/eurodata-ui/dist/react/card/index.js';"
  }
}