{
 "id": "summary-card",
 "name": "Summary card",
 "purpose": "One term, plan or policy explained: what kind of thing it is, a short summary, up to four key points and other names it goes by.",
 "use_when": [
  "to define a term or sum up one policy, plan or document in a few lines",
  "the person asks what something means, or wants one plan, policy or document summed up"
 ],
 "avoid_when": [
  "an answer that has to cite where each statement comes from: use answer-sources",
  "the details of a booking or product as label and value: use key-facts",
  "two or more things compared: use comparison"
 ],
 "type": "content",
 "style": "editorial",
 "width": "medium",
 "tags": {
  "audience": "consumer",
  "industries": [
   "education",
   "finance",
   "productivity",
   "any"
  ],
  "keywords": [
   "definition",
   "summary",
   "glossary",
   "explainer",
   "tl;dr"
  ]
 },
 "root": ".odl-summary-card",
 "parts": [
  {
   "name": "kind",
   "selector": ".odl-kind",
   "what": "one line on what kind of thing it is: a noun, a policy, a plan",
   "slot": "text"
  },
  {
   "name": "title",
   "selector": "h3",
   "what": "the term or the thing summed up",
   "slot": "text"
  },
  {
   "name": "summary",
   "selector": ".odl-summary",
   "what": "the definition or summary in two or three sentences",
   "slot": "text"
  },
  {
   "name": "points",
   "selector": "li",
   "what": "one key point",
   "slot": "list"
  },
  {
   "name": "text",
   "selector": "li > span",
   "what": "the point's words",
   "slot": "text"
  },
  {
   "name": "also_called",
   "selector": ".odl-aka span",
   "what": "other names for the same thing",
   "slot": "text"
  }
 ],
 "data": {
  "type": "object",
  "required": [
   "title",
   "summary"
  ],
  "properties": {
   "kind": {
    "type": "string",
    "maxLength": 40,
    "part": "kind"
   },
   "title": {
    "type": "string",
    "maxLength": 60,
    "part": "title"
   },
   "summary": {
    "type": "string",
    "maxLength": 420,
    "part": "summary"
   },
   "points": {
    "type": "array",
    "minItems": 0,
    "maxItems": 4,
    "part": "points",
    "items": {
     "type": "object",
     "required": [
      "text"
     ],
     "properties": {
      "text": {
       "type": "string",
       "maxLength": 140,
       "part": "text"
      }
     }
    }
   },
   "also_called": {
    "type": "string",
    "maxLength": 100,
    "part": "also_called"
   }
  }
 },
 "states": {
  "shown": [
   "with key points",
   "without key points",
   "with other names",
   "narrow on a phone"
  ],
  "edge": {
   "empty": {
    "status": "handled",
    "how": "with no key points the block and its heading are hidden; without other names that line goes",
    "evidence": ".odl-points:has(.od-empty) { display: none; }"
   },
   "loading": {
    "status": "handled",
    "evidence": "data-od-slot",
    "how": "the Smart UI renderer draws each marked slot as a quiet block of its size while the data arrives; the static file shows the filled part"
   },
   "error": {
    "status": "not_built",
    "how": "if there is nothing to summarise, say so in plain text instead of this part"
   },
   "disabled": {
    "status": "not_built",
    "how": "the part has no controls, so there is no disabled state"
   },
   "overflow": {
    "status": "handled",
    "how": "at most four points; on a phone the padding and the title step down",
    "evidence": "@container (max-width: 26rem)"
   },
   "long_text": {
    "status": "handled",
    "how": "every line wraps, and long words break",
    "evidence": "overflow-wrap: anywhere"
   },
   "missing_image": {
    "status": "none",
    "how": "the part has no photo"
   }
  }
 },
 "tokens": [
  "--ds-border-width-default",
  "--ds-color-border-subtle",
  "--ds-color-icon-accent",
  "--ds-color-surface-raised",
  "--ds-color-text-primary",
  "--ds-color-text-secondary",
  "--ds-elevation-raised",
  "--ds-font-weight-label",
  "--ds-icon-stroke-md",
  "--ds-radius-container",
  "--ds-size-icon-sm",
  "--ds-space-2",
  "--ds-space-inline-md",
  "--ds-space-inset-lg",
  "--ds-space-inset-xl",
  "--ds-space-stack-lg",
  "--ds-space-stack-md",
  "--ds-space-stack-sm",
  "--ds-space-stack-xs",
  "--ds-text-body-lg",
  "--ds-text-body-md",
  "--ds-text-label-md",
  "--ds-text-title-lg",
  "--ds-text-title-md"
 ],
 "a11y": {
  "summary": "An article with one heading; the key points are a list, and the check marks are hidden from screen readers.",
  "roles": [
   "article",
   "banner",
   "list",
   "region"
  ],
  "keyboard": [],
  "controls": {
   "button": 0,
   "input": 0,
   "link": 0,
   "select": 0,
   "textarea": 0,
   "summary": 0
  },
  "focus_visible": false,
  "reduced_motion": false,
  "min_target": false
 },
 "files": {
  "html": "components/summary-card/component.html",
  "bytes": 4457,
  "script": false
 },
 "source": null,
 "photos": 0,
 "urls": {
  "html": "https://opendesigner.dev/library/summary-card.html",
  "json": "https://opendesigner.dev/library/summary-card.json",
  "page": "https://opendesigner.dev/library/summary-card/"
 },
 "get": {
  "curl": "curl -fsSLo summary-card.html https://opendesigner.dev/library/summary-card.html",
  "opendesigner": "python3 path/to/skills/opendesigner/scripts/library.py add summary-card --from https://opendesigner.dev",
  "prompt": "Add the OpenDesigner component summary-card to this project: https://opendesigner.dev/library/summary-card.html. Keep its markup and states; map its --ds-* variables to my tokens."
 }
}