{
  "title": "Card",
  "path": "/components/card",
  "url": "https://design.werklist.com/components/card",
  "text": "https://design.werklist.com/agent/components/card",
  "summary": "A card holds one item, such as a hiring project or a candidate, with a title and at most two actions.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Card",
  "purpose": "Holds one item, such as a hiring project or a candidate, on a flat surface with a title, optional detail and at most two actions.",
  "use": [
    "A set of items of one kind that people browse and open one at a time.",
    "Each item has a title and a line or two of detail."
  ],
  "avoid": [
    "Items people compare field by field or act on in bulk: use a list or the board grid.",
    "A job ad: use the job card. One headline figure: use the stat tile.",
    "A group of settings on a page: group it with a heading and space.",
    "A card inside a card, a card on a well, or a card on --surface-1."
  ],
  "anatomy": [
    {
      "part": "Container",
      "measure": "The fill alone, with no border, ring or shadow.",
      "token": "--surface-1"
    },
    {
      "part": "Corner radius",
      "measure": "16 px",
      "token": "--radius-2xl"
    },
    {
      "part": "Padding",
      "measure": "16 px, or 24 px when spacious",
      "token": "--space-4, --space-6"
    },
    {
      "part": "Title",
      "measure": "16 px on 26 px, weight 500, in --text. Two lines at most, then an ellipsis.",
      "token": "--type-body"
    },
    {
      "part": "Supporting text",
      "measure": "14 px on 22 px, in --text-muted, 4 px below the title",
      "token": "--type-small"
    },
    {
      "part": "Details",
      "measure": "13 px on 20 px, in --text-label, tabular digits, 4 px below the line above",
      "token": "--type-caption"
    },
    {
      "part": "Actions",
      "measure": "At most two small buttons (36 px), quiet or secondary, 16 px below the text and 8 px apart",
      "token": "--space-2"
    },
    {
      "part": "Grid",
      "measure": "A list of cards 16 px apart: one column, two from 640 px, three from 1024 px",
      "token": "--space-4"
    }
  ],
  "variants": [
    {
      "name": "static",
      "use": "Shows information. Its actions are buttons inside it. It has no hover and no focus of its own."
    },
    {
      "name": "clickable",
      "use": "Opens one item. The title is the link, and its target covers the card. The buttons of the card sit above that target and keep their own action."
    }
  ],
  "sizes": [
    {
      "name": "default",
      "padding": "16 px",
      "type": "Title 16 px on 26 px at weight 500, supporting text 14 px on 22 px, details 13 px on 20 px"
    },
    {
      "name": "spacious",
      "padding": "24 px",
      "type": "Title 16 px on 26 px at weight 500, supporting text 14 px on 22 px, details 13 px on 20 px"
    }
  ],
  "states": [
    {
      "name": "rest",
      "change": "Flat: the fill alone.",
      "tokens": [
        "--elevation-0",
        "--surface-1"
      ]
    },
    {
      "name": "hover",
      "change": "The fill turns --surface-control over 150 ms, with no shadow and no lift. Only on a pointer that can hover.",
      "tokens": [
        "--surface-control",
        "--duration-fast",
        "--ease-standard"
      ]
    },
    {
      "name": "pressed",
      "change": "The same --surface-control fill. On a touch screen, where there is no hover, it appears when the card is pressed.",
      "tokens": [
        "--surface-control"
      ]
    },
    {
      "name": "focus visible",
      "change": "A 2 px outline 2 px outside the card while its link has keyboard focus. The outline follows the corners.",
      "tokens": [
        "--focus-ring",
        "--focus-ring-width",
        "--focus-ring-offset"
      ]
    },
    {
      "name": "loading",
      "change": "A skeleton card of the final size and radius.",
      "tokens": [
        "--radius-2xl"
      ]
    },
    {
      "name": "reduced motion",
      "change": "The fill changes at once, without the 150 ms transition.",
      "tokens": []
    },
    {
      "name": "forced colors",
      "change": "A 1 px border in CanvasText. Focus in Highlight.",
      "tokens": []
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Moves to the title link, then to each button of the card in order."
    },
    {
      "key": "Shift+Tab",
      "action": "Moves back."
    },
    {
      "key": "Enter",
      "action": "Opens the item from the title link."
    }
  ],
  "accessibility": [
    "Cards sit in a ul, so screen readers announce the count.",
    "The title is the only link. Its name is the title, and aria-describedby points at the supporting line.",
    "Buttons inside a clickable card are siblings of the link, not its children.",
    "No arrow key navigation between cards: a grid of cards is a list of links, not a composite widget.",
    "Actions are 36 px and reach 44 px on a coarse pointer."
  ],
  "content": [
    "The title is the item's own name, as people say it.",
    "The supporting line carries what people need before opening: for a project, the country and the number of positions.",
    "Dates and counts in tabular digits.",
    "Long country names wrap. Nothing shrinks to fit."
  ],
  "tokens": [
    "--surface-1",
    "--bg",
    "--radius-2xl",
    "--space-1",
    "--space-2",
    "--space-4",
    "--space-6",
    "--text",
    "--text-muted",
    "--text-label",
    "--elevation-0",
    "--surface-control",
    "--duration-fast",
    "--ease-standard",
    "--focus-ring",
    "--focus-ring-width",
    "--focus-ring-offset"
  ],
  "rules": [
    "The card sits on --bg, never on another card, a well or --surface-1."
  ]
}